React中用展开运算符处理对象数组状态是否会发生原数据变异？

1. 第一种写法是否会修改原始状态？ #

不会修改原始状态。你定义的makeCopy方法对原数组做了全量浅拷贝：map会返回全新的数组，每个数组元素都通过{...item}做了一层浅拷贝，所以copiedFilters和它内部的对象，和存在useState里的原始filters没有引用关联，直接修改copiedFilters内部对象的属性不会污染原状态。

注意：第一种写法存在隐藏bug：你直接用filter.id作为数组索引取值，只有当你的filters数组的索引和元素id完全一一对应时才会生效，只要数组顺序调整、id不连续/非数字，就会修改到错误的元素，这是非常不可靠的写法。

2. 两种写法的差异 #

• 正确性差异：第二种写法通过filter.id === f.id匹配目标元素，不依赖数组索引，正确性远高于第一种写法。
• 性能差异：第二种写法在已经做过一次全量数组+对象浅拷贝的前提下，又额外做了一次全量遍历和对象浅拷贝，会产生不必要的性能开销（数组很长时更明显）。
• 最终效果：只要你的filter.id和数组索引对应，两者最终更新的状态结果没有区别。

3. 无immer/immutable库时的推荐实现 #

你不需要做两次全量拷贝，优先选择「仅拷贝变更元素、其余元素复用原引用」的方案，兼顾正确性、性能和简洁性：

function SomeComponent() {
    const [filters, setFilters] = useState(aemFilterData);

    const handleFilterClick = (filter, c) => {
        if ("parentId" in filter) return; // 提前返回减少嵌套
        setFilters(prevFilters => prevFilters.map(f => {
            if (f.id === filter.id) {
                // 仅对发生变更的元素做浅拷贝
                return {...f, open: !f.open};
            }
            // 非目标元素直接返回原引用，不需要额外拷贝
            return f;
        }));
    }
}

这种写法不需要单独定义makeCopy方法，更新逻辑内聚，性能优于全量拷贝的方案，是无第三方库场景下的最优实现。如果你的项目后续允许引入依赖，immer 可以进一步简化写法，不需要手动写展开运算符。

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