react 之 state改变，视图未更新

welson_tom

于 2021-04-20 17:50:55 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： react js

本文链接：https://blog.youkuaiyun.com/guiying123456/article/details/115914724

本文探讨了React中状态更新的机制，特别关注了对象数组作为状态时的问题。通过对比错误和正确的实现方式，揭示了直接修改状态引用导致视图不更新的原因，并提供了避免此问题的有效策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 错误方式
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)，则不更新视图。