防止在复制嵌套数组/对象时意外修改 React 状态

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

防止在复制嵌套数组/对象时意外修改 React 状态

2025-11-09

浏览次数：次

返回列表

防止在复制嵌套数组/对象时意外修改 React 状态

本教程旨在解决 react 中一个常见陷阱：当浅拷贝包含嵌套对象的数组状态时，意外修改原始状态的问题。文章将解释为何展开运算符（spread syntax）在此场景下无法实现深拷贝，并提供两种有效的深拷贝解决方案：现代的 `structuredclone` api 和针对特定数据结构的 `map` 结合对象展开运算符的方法，确保您能独立修改复制的数据，从而维护 react 状态的不可变性。

在 React 应用开发中，管理状态的不可变性至关重要。当状态中包含数组或对象等引用类型数据时，如果不正确地复制它们，可能会导致意外的副作用，即修改了“副本”却同时改变了原始状态。本文将深入探讨这一问题，并提供可靠的解决方案。

理解浅拷贝与深拷贝的陷阱

在 J*aScript 中，当我们尝试复制一个包含嵌套对象或数组的状态时，如果仅仅使用展开运算符（spread syntax）或 Object.assign() 等方法，实际上执行的是浅拷贝。这意味着虽然创建了一个新的数组或对象，但其内部的嵌套元素仍然引用着原始状态中的相同内存地址。

考虑以下 React 状态示例：

const [arrayState, setArrayState] = useState(
    [
        {
            id: 'ID_1',
            text: 'item 1',
        },
        {
            id: 'ID_2',
            text: 'item 2',
        },
        {
            id: 'ID_3',
            text: 'item 3',
        },
        {
            id: 'ID_4',
            text: 'item 4',
        },
    ]
);

const myFunction = () => {
    let myVariable = [...arrayState]; // 浅拷贝

    // 尝试修改 myVariable 中的一个嵌套对象
    myVariable[1].text = 'myVariable item 2'; 

    // 此时，arrayState[1].text 也会被意外修改，这并非我们所期望的
    console.log(arrayState[1].text); // 输出 'myVariable item 2'
};

在这个例子中，myVariable = [...arrayState] 确实创建了一个新数组 myVariable。然而，myVariable 数组中的元素（即那些 { id: '...', text: '...' } 对象）仍然是与 arrayState 数组中元素相同的引用。因此，当 myVariable[1].text = 'myVariable item 2' 执行时，它直接修改了 myVariable 和 arrayState 共享的第二个对象，导致原始 arrayState 被意外修改。

为了避免这种问题，我们需要进行深拷贝，即不仅复制顶层数组，还要递归地复制所有嵌套的引用类型数据，确保副本与原数据在内存上完全独立。

解决方案一：使用 structuredClone 进行深拷贝

structuredClone() 是一个现代的 Web API，专门用于创建 J*aScript 值的深层结构化克隆。它能够处理各种复杂的数据类型，包括嵌套对象、数组、Map、Set、Date、RegExp、Blob、File、ImageData 等，甚至循环引用。这是进行深拷贝最推荐和最强大的方法。

const myFunction = () => {
    let myVariable = structuredClone(arrayState); // 使用 structuredClone 进行深拷贝

    myVariable[1].text = 'myVariable item 2'; // 现在，只有 myVariable 被修改

    console.log(arrayState[1].text); // 输出 'item 2'，原始状态未受影响
};

优点：

全面性： 支持多种内置对象和复杂数据类型。
简洁性： API 简单易用，一行代码即可实现深拷贝。
健壮性： 能够处理循环引用，避免栈溢出错误。
标准化： 作为 Web API，具有良好的浏览器兼容性（现代浏览器均支持）。

注意事项：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

structuredClone 不能克隆函数、DOM 节点、Error 对象等。
对于极深或极大的数据结构，深拷贝操作可能会有性能开销，但对于大多数常见场景，其性能是可接受的。

解决方案二：针对特定结构的深拷贝（map 结合对象展开）

如果您的数据结构相对简单，例如只是一个包含纯粹的、非嵌套对象的数组（如本教程的示例），您可以使用 map 方法结合对象展开运算符来手动实现深拷贝。这种方法对于特定场景非常有效且易于理解。

const myFunction = () => {
    // 使用 map 遍历数组，并为每个对象创建一个新的浅拷贝
    let myVariable = arrayState.map(o => ({...o})); 

    myVariable[1].text = 'myVariable item 2'; // 现在，只有 myVariable 被修改

    console.log(arrayState[1].text); // 输出 'item 2'，原始状态未受影响
};

在这个方法中：

arrayState.map(...) 创建了一个全新的数组。
对于数组中的每一个原始对象 o，({...o}) 创建了一个新的对象，并将 o 的所有可枚举属性复制到这个新对象中。

优点：

清晰直观： 对于简单的数组对象结构，代码意图明确。
性能： 对于扁平的数组对象结构，性能通常良好。

注意事项：

局限性： 这种方法仅对“一层”嵌套的纯 J*aScript 对象有效。如果您的对象内部还有嵌套对象，它将再次面临浅拷贝问题。例如：[{ id: 1, data: { value: 'test' } }] 这种结构，({...o}) 只能复制 data 对象的引用，而不能深拷贝 data 对象本身。
不适用于复杂类型： 无法深拷贝 Date、RegExp、Map、Set 等复杂对象类型。