Day270/300 react hooks 使用useState 修改后，视图不更新

原创已于 2023-05-22 17:10:27 修改

· 2.2k 阅读

1 ·

版权

文章标签：

#react.js #javascript #ecmascript

于 2023-05-22 17:09:21 首次发布

文章讨论了在React中使用useState更新状态时遇到的问题，即当数组状态改变但DOM未更新的原因，这主要是因为useState的异步性质。解决方案是通过使用数组的结构赋值方式来确保状态更新。此外，文章还列举了ReactHooks的基本用途，如useState、useEffect、useContext等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、React 代码

{chatData.map(item => {
    return <div key={item.id}> </div>
  })}

使用useState改变数组的值，dom没有更新：

const showChat = (item)=>{
 item.open = !item.open
 console.log('item-open',chatData)
 setChatData(chatData)
}

2、原因

useState异步，数据不能及时获取到

useState() 属于异步函数，在useState() 第一次存储的时候，值会存储不上。

因为react中state的更新是异步的，我们setState后，react不会立刻对值进行改变，而是将其暂时放入pedding队列中。
react会合并多个state，然后值render一次，所以不要在循环中使用useState，它有可能只render最后一次set值，但是当传入一个函数时，函数就会被放入一个队列中，然后按照顺序执行。

React中默认浅监听，当变量为引用类型时，栈中存的是对象的引用（地址），setState改变的是堆中的数据。所以此时set后，栈中的地址还是原地址，React浅监听到地址没变，会认为State并未改变，所以没有重新渲染页面

3、解决方案

修改为数组的结构赋值形式就可以了。

const showChat = (item)=>{
 item.open= !item.open
 console.log('item-open',item.open,chatData)
 setChatData([...chatData])
}

4、React Hooks 整理

useState: 用来在函数组件中添加状态，能够代替类组件中的state；
useEffect: 用来在函数组件中添加副作用，例如发起网络请求、更新DOM等操作；
useContext: 用来在函数组件之间共享全局数据；
useReducer: 用来管理复杂状态或多个相关状态的更新；
useCallback: 用来缓存函数实例，避免不必要的渲染；
useMemo: 用来缓存计算结果，提高组件渲染性能；
useRef: 用来获取DOM节点或缓存任何可变值，类似于类组件中的ref属性。

参考链接

链接：https://juejin.cn/post/7102334510808694792