React子组件修改拷贝状态时父组件状态同步变更，如何阻止？

你遇到的问题是浅拷贝导致的引用共享：

• 子组件里[...filters]是浅拷贝，数组里的每个filter对象仍然和父组件filters数组里的对象指向同一个内存地址。
• 当你直接修改item.isSelected和item.value时，本质是在修改父组件状态里的原对象，所以父组件的filters会跟着变化，哪怕你没调用setFilters。

要彻底断开父子组件的对象引用，需要做对象层级的深拷贝，同时避免直接修改原对象：

1. 初始化子组件状态时做深拷贝 #

把子组件里的初始化代码从浅拷贝改成逐个对象复制：

// 替换原来的 var copiedFilters = [...filters]
const copiedFilters = filters.map(filter => ({ ...filter }));
const [newFilters, setNewFilters] = useState(copiedFilters);

这样每个filter对象都是全新的，和父组件的对象不再共享引用。

2. 修改onFilterChange函数，避免直接修改原item #

不要直接操作传入的item对象，而是在更新时创建新对象：

const onFilterChange = (e, item) => {
  const newValue = e.target.value;
  const isSelected = newValue !== '';

  const updatedFilters = newFilters.map((filter) => {
    if (filter.id === item.id) {
      // 返回全新的对象，不修改原item
      return {
        ...filter,
        isSelected,
        value: newValue,
      };
    }
    return filter;
  });

  setNewFilters(updatedFilters);
};

额外说明 #

如果后续需要把子组件的筛选结果同步给父组件，只需要在合适的时机（比如点击"应用筛选"按钮）调用：

setFilters(newFilters);

此时传递的是子组件里的全新数组和对象，不会意外修改父组件的状态。

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