如何避免修改React数组状态副本时意外改动原状态？

你遇到的问题是因为浅拷贝导致的：用[...arrayState]复制数组时，只是复制了数组的第一层引用，数组里的每个对象仍然和原状态中的对象指向同一个内存地址。所以修改新数组中对象的属性时，原状态里的对应对象也会被改动。

要只修改myVariable而不影响arrayState，需要对数组中的对象也进行拷贝，也就是深拷贝，以下是几种可行的方法：

方法1：使用map遍历并拷贝每个对象 #

这种方法适合对象结构较简单的场景，逐个复制数组里的每个对象：

const myFunction = () => {
    // 遍历数组，为每个对象创建新的副本
    let myVariable = arrayState.map(item => ({ ...item }));

    myVariable[1].text = 'myVariable item 2';
    // 此时原arrayState完全不受影响
};

方法2：使用JSON序列化实现深拷贝 #

如果数组中的对象有多层嵌套，可以用JSON.parse(JSON.stringify())实现彻底的深拷贝，但注意这种方法无法处理函数、Symbol、循环引用等特殊类型：

const myFunction = () => {
    let myVariable = JSON.parse(JSON.stringify(arrayState));

    myVariable[1].text = 'myVariable item 2';
};

方法3：使用第三方库（可选） #

如果项目中已经引入了Lodash，可以直接用_.cloneDeep()方法实现可靠的深拷贝：

// 先确保已安装并引入Lodash
import _ from 'lodash';

const myFunction = () => {
    let myVariable = _.cloneDeep(arrayState);

    myVariable[1].text = 'myVariable item 2';
};

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