react中hooks使用useState的更新不触发dom更新问题及解决
作者：夜空孤狼啸
这篇文章主要介绍了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])
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。