React之state改变页面不更新未重新渲染的4种出现方式及其解决办法

1. 在redux中修改state页面未更新

解决办法:  请检查你的state是不是直接改变原state的, 记住不要直接修改state

原因:  reducer 中 state 是引用, 在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页面

参考:

react State改变，页面却没有改变

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值

扫描二维码关注公众号，回复： 11021608 查看本文章

3. 组件render渲染了一个对象, 当state已确定更新但视图未更新

代码:

// 错误方式
const obj = this.state.obj;

obj.forEach((e) => {
        xxxxx //省略的代码是改变了对象的值
});

this.setState({
    obj
});

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

// 正确方式
const obj = [...this.state.obj];

obj.forEach((e) => {
        xxxxx //省略的代码是改变了对象的值
});

this.setState({
    obj
});

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

参考: 

react更新state后视图没有变化

react学习笔记-解决react修改state对象，页面不刷新问题

4. state更新了, 拿到的却是旧的值

代码:

//默认string等于''
this.setState({
    string: '123'
})
console.log(this.state.string)//''

解决办法:

this.setState({
    string: '123'
},()=>{
    //setState后的回调
    console.log(this.state.string)//'123'
})

 原因: react还没更新state, 打印就执行完毕了