1. 组件render渲染了一个对象数组, 当state已确定更新但视图未更新
代码:
// 错误方式
const obj = this.state.obj;
obj.forEach((e) => {
xxxxx //省略的代码是改变了对象的值
});
this.setState({
obj
});
解决办法: 克隆
// 正确方式
const obj = Object.JSON(Object.stringify(this.state.obj));
obj.forEach((e) => {
xxxxx //省略的代码是改变了对象的值
});
this.setState({
obj
});
原因: 对象数组是引用方式 ,对于react来说它的值都是地址(涉及到tree diff),因为没有被重新赋值(地址没有改变),所以 react 会认为仍然是之前的元素(element),则不更新视图。
参考:
react更新state后视图没有变化
react学习笔记-解决react修改state对象,页面不刷新问题
2. 组件render渲染了一个列表, 当state改变视图更新异常
代码:
{this.state.string.split('').map((item,index)=><p key={index}>item</p>)}
//其中this.state.string = '1' 且每秒钟 +1 ,此时页面视图未发生变化
解决办法: key={