项目中遇到使用useState的数据监听时,修改了数据值但无法触发页面的重新渲染,代码如下:
// 此时不会触发数据改变重新渲染组件
let _data = itemState;
_data[index].unfold = !_data[index].unfold;
setItemState(_data)
_data = itemState
此时数据的引用并没有改变,即使改变了内部的某个值,也不会触发重新渲染,通过 _data = [...itemState]
或者 setItemState([..._data])
的方式相当于复制了 itemState
的值产生了一个新数据,引用发生改变,此时修改数据即可触发重新渲染。
解决方法:
// [...itemState]相当于复制,此时会触发数据改变重新渲染组件
let _data = [...itemState];
_data[index].unfold = !_data[index].unfold;
setItemState(_data)
参考文章:https://blog.csdn.net/qq_43940789/article/details/125844601