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中useState状态异步更新的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
本文文章介绍了React中的Ref概念,包括其基础概念、使用方式,并讨论了在React中通过Ref操作DOM值时避免组件不更新的问题,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
这篇文章主要介绍了react实现移动端下拉菜单的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生2022-09-09
这篇文章主要介绍了TypeScript在React项目中的使用总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
React中key用于唯一标识元素,提升列表渲染性能并确保状态一致性,key帮助React高效比较新旧节点,本文主要介绍了React 中 key 的作用,感兴趣的可以了解一下2025-09-09
这篇文章主要介绍了React动态更改html标签的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了React组件之多选Checkbox实例,具有很好的参考价值,希望对大家有所帮助,2023-10-10
这篇文章主要为大家介绍了Remix路由模块输出对象loader函数详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-04-04
这篇文章主要为大家详细介绍了如何基于React封装一个层次模糊效果的容器组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
最新评论