react 之 state 数据改变页面不更新未重新渲染的几种情况 及 解决办法

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={index}改成key={item+index}。

原因: key是唯一的. 而1和10在split后是[1]和[1,0],他们都共有1, 这时候就会导致组件状态问题。

参考: 

 react列表渲染时为什么尽量不要把索引设置为key值

3. A和B子组件共用一个父组件state, 此时点击子组件A按钮更新了父组件state, 但是子组件B视图不更新
解决办法: 同上(2)。

原因: 同一个页面调用同的组件(出现问题的组件)的key都用了index, 也会导致组件状态问题。

4. 父子组件同时初始化, 子组件接收的值来自父组件异步获取的数据
场景:

初始化 state.value=' ',

componentDidMount时, 父组件异步获取数据赋给state.value,

而子组件一同初始化componentDidMount中拿到的state.value还是空的。

解决办法:

// render中判断state.value不等于空,再加载子组件即可
render() {
    return (
        { this.state.value? <subComp value={this.state.value}>我是子组件</subComp> : '' }      
    );
}
原因: 因为子组件已经componentDidMount渲染完成了, 父组件异步获取数据就没办法拿到。

*拓展:  貌似componentWillReceiveProps是符合需求的.