React中为何初始状态对象与组件状态一同被修改？

问题根源 #

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

1. 初始化状态时，直接将employeesInitialState传入useState，此时组件状态和原常量指向同一个对象引用。
2. 更新状态时，{...prev}只是浅拷贝外层对象，嵌套的contact属性仍然和原对象共享引用，修改copy.contact时会直接修改到原employeesInitialState里的contact对象。

修复步骤 #

1. 初始化状态时创建独立副本

避免直接引用原常量对象，用深拷贝或手动嵌套拷贝生成独立对象：

• 方式1：JSON序列化（适合无函数、Symbol等特殊类型的对象）

const [state, setState] = useState<IEmployee>(JSON.parse(JSON.stringify(employeesInitialState)));

• 方式2：手动嵌套解构（更可控，适合结构明确的对象）

const [state, setState] = useState<IEmployee>({
  ...employeesInitialState,
  contact: { ...employeesInitialState.contact }
});

2. 更新状态时正确拷贝嵌套对象

修改状态更新逻辑，确保contact是新的副本，不再共享原引用：

setState((prev: IEmployee) => {
  return {
    ...prev,
    contact: {
      ...prev.contact,
      [name[1]]: value
    }
  };
});

为什么这样有效 #

• 初始化时的副本让组件状态和原employeesInitialState彻底分离，互不影响。
• 更新时通过{...prev.contact}创建新的contact对象，修改新对象的属性不会触及原常量的引用。

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