使用react，hooks钩子时useState更新不渲染组件的问题

最新推荐文章于 2024-05-22 18:02:44 发布
置顶 最新推荐文章于 2024-05-22 18:02:44 发布
阅读量2.2w 收藏 6
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44160385/article/details/105280622
版权

react中，hooks钩子时useState更新不渲染组件的问题

在这里插入图片描述

当使用react，写如图组件时，发现一个很关键的问题，当选择用class写的时候，很容易通过组件更新渲染。
当我决定用函数式组件hooks来重构我的组件的时候，发现了一个很难搞的问题，当我通过onChange去改变父组件value的时候，value的值改了，竟然没有重新渲染组件？？？？
一脸懵逼的我，于是试图将class组件时先将value设为空再赋值-----失败了
于是试图通过钩子的生命周期看了一遍。。。。------失败了
还是百度吧------发现了同样的问题。。。发现用只要再后面加slice()
于是本着先解决问题的态度，将图中红圈位置改为了onChange(value.slice())
-----于是，解决了这个神奇的问题。

现在问题解决了，回过头来看看到底怎么回事。。。
查看文档发现一句话useState里数据务必为immutable （不可赋值的对象）
也就是ass component的state也提倡使用immutable数据，但不是强制的，因为只要调用了setState就会触发更新。所以再class组件中没有出现这种问题，或者通过改变为空再赋值是可以触发更新的。
但是再使用useState时，如果在更新函数里传入同一个对象时将无法触发更新。
于是解决思路就是通过slice() 返回一个新的对象去赋值是解决问题的关键。。。。

重阳微噪
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
React中传入组件的props改变时更新组件的几种实现方法
weixin_34406086的博客
09-12 5853
我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件，常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中（这种state被成为派生状态（Derived State）），从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedSta...
react hooks钩子时useState更新不渲染组件，更新的数据是对象，怎么解决
weixin_47411869的博客
03-27 2781
使用深拷贝：在更新 state 时，使用深拷贝将旧的 state 值复制给新的 state，这样一来，新的 state 值的地址与旧的 state 不同，就能够触发重新渲染了。在上述代码中，使用 JSON.parse(JSON.stringify()) 方法对旧的 state 进行深拷贝，并修改其 age 属性后作为新的 state 值，从而可以正常触发重新渲染。使用不可变数据类型：使用不可变的数据类型，如字符串、数字和布尔值，而不是引用类型的对象，这样就不会出现值被修改但地址相同的问题。
React hooks使用useState异步回调获取不到最新值的问题解决
最新发布
weixin_45961018的博客
05-22 577
写hooks的朋友都会遇到的问题，在使用useState声明好的值时，发现该值总是上一次的数据，我也有同样的困扰，于是有了以下代码。
父组件更新子组件未渲染更新
m0_37684037的博客
02-23 402
子组件通过prop绑定父组件数据；父组件更新后 发现子组件未更新 解决办法： computed: { // 父组件更新数据 子组件未渲染更新 checkedMap: { get () { return JSON.parse(JSON.stringify(this.tableData)) } } }, ...
用React 中的useState改变值不重新渲染的问题
热门推荐
weixin_45621877的博客
09-21 1万+
不渲染 const [lists,setLists] =useState([]); ..... const arr = lists; arr.splice(index,1) //根据删除index下标的这一项 setLists([arr]); //重复设置要改变数组的地址 解决办法： const [lists,setLists] =useState([]); ..... const arr = lists; arr.s
react函数组件性能优化-避免不必要的重新渲染
qq_45228255的博客
04-13 1821
纯组件-浅层对比 对于引用类型来说：只比较对象的引用（地址）是否相同 例如： const obj = { number: 0 } const newObj = obj newObj.number = 2 console.log(newObj === obj) // true 所以PureComponent内部比较： 最新的state.obj === 上一次的state.obj ，如果为true，就不重新渲染组件 注意： 不要直接修改源数据，错误做法： state = { obj: { .
React Hook 强制您的功能组件更新。
06-08
useForceUpdate useForceUpdate 是一个 React Hook，它强制您的函数组件重新渲染。 useForceUpdate 本身没有任何用途。 它是一个小包，旨在集成到更大的钩子中，使仍然依赖 this.forceUpdate() 的任何类功能过时。 ...
React hooks钩子练习源码
11-12
在这个名为"React hooks钩子练习源码"的压缩包中，我们可以期待看到一系列利用Hooks实现的React组件示例。 首先，让我们来深入理解React Hooks的核心概念： 1. useState：这是最基础的Hook，用于在函数组件中添加...
react-render-time:React钩子检查渲染组件所需的时间
04-24
React渲染时间React钩子检查渲染所需的时间演示版安装yarn add react-render-time用法import React from "react"import useRenderTime from "react-render-time"const App = ( ) => { useRenderTime ( "App" ) ...
ReactHooks:有关使用React的钩子的一切
04-09
在不使用类组件的情况下，我们可以通过Hooks来管理组件的状态、执行副作用操作、以及复用状态逻辑。以下是对React Hooks的详细介绍： 1. useState：这是最基础的Hook，用于在函数组件中添加状态。它接受一个初始值...
react-storage-hooks:React钩子以保持持久状态
05-02
仅在必要时从存储读取，并在渲染后写入存储。 :input_latin_uppercase: 完全输入。 用TypeScript编写。 包含类型定义，并使用进行了tsd 。 :flexed_biceps: 有测试的支持。 API的完整介绍。 要求您需要使用React的...
React中父组件更新，子组件没有更新
qq_42186180的博客
11-20 4841
React中父组件更新，子组件没有更新情况 有的时候会遇到父组件状态更新了，子组件却没有更新的情况，理解react生命周期就好解决了 一个组件更新的触发条件有三种情况 1 state更新，用setState()更新即可在componentWillReceiveProps()生命周期中更新 componentWillReceiveProps(nextProps){ this.setState({ data: nextProps.data }) } props更新，这种情况适
React 父组件数据实时更新了，子组件没有更新
H.千面的博客
09-01 8634
需求：父组件发送请求后，根据返回数据实时更新部分state，子组件实时检测跟随跟新 1、可以使用利用react的componentWillReceiveProps方法 子组件中增加 componentWillReceiveProps(nextProps:any){ this.setState({ reuploadFlag: nextProps.reuploadFlag, successFlag: nextProps.successFlag, u
react hook的setState后，不会重新render页面
cxz
06-03 4100
1.state hook : set同一变量的话不重新render import React, { useState } from 'react'; export default function Test() { const [state, setState] = useState({ filter: { start: moment() .startOf('month') .format('YYYY-MM'), end: momen
使用React Hooks请求数据并渲染
ForeverCjl的专栏
10-16 9142
前言 在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。在以往使用React Class组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。 随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢？本文将会介绍如何使用React的新特性Hook来编写组件并
react hook使用useState()更新状态（state）异步导致不能及时读取更新之后的数据
wangming0123的博客
07-01 9415
1、场景描述 我在更新一个状态之后要立马用这个状态去更新其他状态 我的源代码 const onChange = (nextTargetKeys: any) => { //更新状态 setTargetKeys(nextTargetKeys); let v = 0; let n = 0; let g = 0; //立马使用 targetKeys.forEach((item: number, index) => { v += mockData[
react hook 接口获取数据渲染_用动画和实战打开 React Hooks（二）：自定义 Hook 和 useCallback...
weixin_33213911的博客
01-26 296
在上一篇教程中，我们通过动画的方式不断深入 useState 和 useEffect，基本上理清了 React Hooks 背后的实现机制——链表，同时也实现了 COVID-19 数据可视化应用的全球数据总览和多个国家数据的直方图。用动画和实战打开 React Hooks（一）：useState 和 useEffect​zhuanlan.zhihu.com如果你想直接从这一篇教程开始阅读和实践，可...
react组件优化，当父组件数据变化与子组件无关时，控制子组件不重新渲染
weixin_45966674的博客
01-15 951
这样判断 就会监听到 cont 到底有没有改变 如果改变了 则重新渲染 如果完全相等 那就表示没有改变 就返回false 阻止渲染。首先 我们在父组件中定义了一个cont响应式数据 然后 在componentDidMount生命周期中定义了一个定时器 改变cont。但这样显然是有问题的 因为这样 当子组件关联的数据改变时 我们这样写死 返回false 他就不渲染了。这里 我们知道 当父组件数据改变时 子组件也会被重新渲染。定时器跑几下 我们就看出不对了。
react hooks组件销毁时
08-24
在React中使用Hooks的组件销毁时，你可以使用`useEffect`钩子函数的清理机制来执行一些清理工作。具体来说，你可以在`useEffect`函数中返回一个清理函数，此函数将在组件销毁时被调用。 下面是一个示例，展示了如何在组件销毁时执行一些清理操作： ```javascript import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { // 在这里进行一些副作用操作 return () => { // 在组件销毁时执行清理操作 }; }, []); // 组件的其余部分 return ( // JSX代码 ); } ``` 上述代码中，我们使用`useEffect`钩子函数来注册一个副作用操作。在返回的箭头函数中，你可以添加需要在组件销毁时执行的清理代码。例如，你可以取消订阅事件、关闭定时器或清除非受控组件的资源。 需要注意的是，为了确保清理函数只在组件销毁时执行一次，我们传递一个空数组（`[]`）作为第二个参数给`useEffect`。这样，清理函数只会在组件首次渲染时执行一次，并在组件卸载时执行。 希望这能帮到你！如果你有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值