ReactJS中setInitialData未调用却自动更新的诡异Bug求助

核心原因是JavaScript引用类型的特性：你在初始化状态时，将同一个API返回的resData对象同时赋值给了initialData和data，这两个状态实际上指向了内存中的同一个对象。当你修改data的属性时，本质上是在修改这个共享对象的内容，所以initialData也会同步变化——你并没有修改initialData的状态值，而是修改了它指向的对象本身。

具体代码问题点 #

在初始化数据的useEffect中，你直接将同一个对象赋值给两个状态：

const resData = result.data;
setData(resData);
setInitialData(resData); // 这里和setData共享了同一个对象引用

对象和数组属于引用类型，赋值操作不会创建新的副本，只是把内存地址传递给了两个状态变量。

解决方案：初始化时创建深拷贝 #

要让initialData和data完全独立，需要在初始化时对resData进行深拷贝，确保两者指向不同的对象实例。

方法1：使用JSON序列化/反序列化（适合结构简单的数据）

修改初始化代码：

const resData = result.data;
setData(resData);
// 通过JSON方法创建深拷贝，断开引用
setInitialData(JSON.parse(JSON.stringify(resData)));

方法2：使用深拷贝工具（适合复杂数据结构）

如果你的数据包含函数、RegExp等JSON无法处理的类型，可以使用lodash的cloneDeep方法：

import { cloneDeep } from 'lodash';

// ...

const resData = result.data;
setData(resData);
setInitialData(cloneDeep(resData));

补充说明 #

你在Products组件中使用的setData({...data, products: newArray})是浅拷贝，它只会复制data的第一层属性。但因为初始化时initialData和data已经共享了同一个对象引用，所以即使这里做了浅拷贝，之前修改的内容已经影响到了initialData。只有在初始化时就断开引用，才能从根源解决问题。

内容的提问来源于stack exchange，提问作者Joshua Feliciano