React 执行setState、updateState后，组件不更新，通过深拷贝解决

最新推荐文章于 2024-03-17 19:44:56 发布

Yoyo_Yan

最新推荐文章于 2024-03-17 19:44:56 发布

阅读量1.9k

点赞数 3

分类专栏： react JS 前端文章标签： javascript react

本文链接：https://blog.csdn.net/Learn_inCSDN/article/details/114021343

版权

前端同时被 3 个专栏收录

17 篇文章

订阅专栏

12 篇文章

订阅专栏

react

3 篇文章

订阅专栏

在React开发中，直接修改props或state的引用数据类型可能导致组件不更新。为确保渲染，应使用深拷贝先复制数据再进行修改。举例说明，通过导入深拷贝库，先对props中的数组或对象进行深拷贝，然后操作拷贝后的数据，最后更新state或调用action更新状态，以触发组件重新渲染。

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

在更新数据时，尤其是引用数据类型的数据，如：数组、对象等。直接更新原数据后不会触发render。

例如：如果直接将props中的数据解构出来进行修改，修改后直接更新状态，会出现组件不更新的情况。
可以考虑如下写法：
先将解构出来的数据神拷贝后，在进行操作。

// import deepClone from 'xxxxxx';

onSave=()=>{
	let { gridList } = this.props;
	let _list = deepClone(gridList);
	
	... // 对 _list 进行操作

	this.setState({ gridList: _liist });
	// or
	// actions.mainModel.updateState({ gridList: _liist });
}