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

Posted 2023-03-29

参考技术A 页面通过render渲染，通过setState改变数据但是页面并未改变。（记录）

const obj = this.state.obj;

obj.forEach((e) =>

        改变了对象的值

);

this.setState(

    obj

);

此时页面并未改变

解决方法：浅拷贝方式获取对象并修改再赋值。

const obj = [...this.state.obj];

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

react usestate 重新设置数据后，不渲染页面

参考技术A useState里数据务必为immutable （不可赋值的对象），也就是ass component的state也提倡使用immutable数据，但不是强制的，因为只要调用了setState就会触发更新。

所以再class组件中没有出现这种问题，或者通过改变为空再赋值是可以触发更新的。

但是再使用useState时，如果在更新函数里传入同一个对象时将无法触发更新。