react中hooks使用useState的更新不触发dom更新问题及解决
更新时间：2024年01月03日 09:20:55 作者：夜空孤狼啸
这篇文章主要介绍了react中hooks使用useState的更新不触发dom更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题
const [tableData, setTableData] = useState([{ key: '1' }])
const newAddField = () => {
tableData.push({
key: `${fieldNum + 1}`
})
setFieldNum(fieldNum + 1)
// 这种方法并不会更新dom节点
setTableData(tableData)
}
这种方法，虽然更新的useState，但是dom节点并不会更新
原因
在 Hook 中直接修改 state 的一个对象（或数组）属性的某个子属性或值，然后直接进行 set，不会触发重新渲染。
对 Class Component来说，state 是 Immutable 的，setState 后一定会生成一个全新的 state 引用。
它是通过 this.state 方式读取 state，所以每次代码执行都会拿到最新的 state 引用。
对 Hook Function Component 而言，useState 产生的数据也是 Immutable 的，通过数组第二个参数 Set 一个新值后，原来的值会形成一个新的引用在下次渲染时。
解决方法
通过扩展运算符改变引用地址
const [tableData, setTableData] = useState([{ key: '1' }])
const newAddField = () => {
tableData.push({
key: `${fieldNum + 1}`
})
setFieldNum(fieldNum + 1)
// 这种方法并不会更新dom节点
// setTableData(tableData)
// 通过扩展运算符实现深拷贝
setTableData([...tableData])
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
React Native中NavigatorIOS组件的简单使用详解
这篇文章主要介绍了React Native中NavigatorIOS组件的简单使用详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
React中useMemo、useCallback的具体使用
useMemo和useCallback是React中用于缓存计算结果和函数的Hooks,本文就来介绍一下useMemo、useCallback的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-01-01
这篇文章主要介绍了React+Koa实现文件上传的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
函数式组件的基本意义就是,组件实际上是一个函数,不是类,下面这篇文章主要给大家介绍了关于React中函数组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
本文主要介绍了react脚手架配置代理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过props属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的2022-12-12
这篇文章主要为大家介绍了React 之 Suspense提出的背景及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本文主要介绍了React文字展开收起组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了react 事项懒加载的三种方法及使用场景，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了React利用路由实现登录界面的跳转，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论