React中为何用filter后修改新数组会改变原状态？

你遇到的问题核心是JavaScript引用类型的特性，和React状态机制结合导致的：

• filter确实会返回一个新数组，但这个新数组里的对象元素，只是原initialData数组中对象的引用——也就是说，新数组和原数组里的对象指向内存里的同一块数据。你修改newData[0].id时，本质是在修改原initialData里对应对象的属性，自然会影响到React状态。
• 没调用setState却看到状态变化，是因为React状态里存的是引用类型的内存地址。你没更新这个地址（也就是没调用setState替换新数组），但直接修改了地址指向的对象内容，所以原状态的对象数据已经被改动了。这种操作不规范，可能导致React无法正确追踪状态变化，引发渲染异常。

要避免直接修改原状态，需要创建对象的副本再修改：

// 用map遍历，找到目标对象时创建新对象
const updatedData = initialData.map(item => {
  if (item.id === 你要修改的目标id) {
    return {...item, id: newValue}; // 展开原对象，覆盖id属性，生成新对象
  }
  return item; // 其他对象直接返回，不改动
});
// 调用setState更新状态
setInitialData(updatedData);

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