React hooks数据改变后页面没有重新渲染

页面通过setState改变数据但是页面并未改变

先分析原因

原因: 对象数组是引用方式 ,对于react来说它的值都是地址(涉及到tree diff)，因为没有被重新赋值(地址没有改变)，所以 react 会认为仍然是之前的元素(element)，则不更新视图。

补充在使用useEffect时监测不到堆中值得变化，所有引用类型数据都应该注意这一点。也就是深拷贝

 解决方案，不能使用浅拷贝直接赋值，而需要使用深拷贝

// 错误代码
const [dataFormList, setDataFormList] = useState(dataList);
const list = dataFormList; //浅拷贝
setDataFormList(list); // 数据生效，单页面没有改变

 

// 正确代码
const [dataFormList, setDataFormList] = useState(dataList);
const list = [...dataFormList]; //深拷贝 es6 结构赋值
setDataFormList(list); // 数据生效，单页面改变