React子组件state异常镜像父组件state问题求助

问题原因 #

你踩了JavaScript引用类型的坑：
子组件handleSubmit里直接把this.state（对象类型）传给父组件的handleForm函数，而对象是引用传递——父组件拿到的user参数和子组件的this.state指向内存里的同一个对象。

父组件执行user.id = Math.random()时，直接修改了这个共享的对象，所以子组件的state自然会多出id字段，这和React的state机制无关，纯粹是JS对象引用特性导致的。

修复方案 #

核心是避免操作原对象，传递或修改对象的副本，两种方式任选其一：

方式一：子组件传递时生成副本 #

修改子组件的handleSubmit，用展开运算符创建新对象再传递：

handleSubmit = (e) => {
  e.preventDefault();
  // 生成state的副本，避免传递原引用
  this.props.handleForm({ ...this.state });
};

方式二：父组件接收时生成副本 #

如果不想改动子组件，就在父组件的handleForm里先复制传入的对象：

const handleForm = (user) => {
  // 复制传入的user并添加id，不修改原对象
  const newUser = { ...user, id: Math.random() };
  const newState = [...users, newUser];
  setUsers(newState);
};

额外提醒 #

在React中处理state时，要严格遵循不可变原则——永远不要直接修改state对象，而是通过创建新对象的方式更新。这样不仅能避免这类引用问题，还能保证React的更新机制正常触发。

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