React使用setState更新嵌套对象报错：Cannot set properties of undefined

错误原因 #

你的代码存在两个核心问题：

1. 直接修改原state对象：state[event.target.name].value = event.target.value 违反了React的状态不可变原则，直接篡改了原state的属性。
2. 错误的setState参数：你把修改后的value（字符串类型）传给了setState，导致第一次更新后，state从原本的嵌套对象变成了字符串。下次触发onChange时，state[event.target.name]会因为字符串没有对应属性而返回undefined，自然就会抛出"Cannot set properties of undefined"的错误。

正确写法 #

方式一：函数式更新（推荐，确保获取最新状态）

利用函数式更新拿到最新的prevState，通过展开运算符逐层创建新对象，保证状态不可变性：

function handleChange(event) {
  const { name, value } = event.target;
  setState(prevState => ({
    ...prevState,
    [name]: {
      ...prevState[name],
      value: value
    }
  }));
}

方式二：创建新状态对象

先基于原state创建完整的新对象，再传入setState：

function handleChange(event) {
  const { name, value } = event.target;
  const newState = {
    ...state,
    [name]: {
      ...state[name],
      value: value
    }
  };
  setState(newState);
}

关键提醒 #

React的状态是不可变的，更新嵌套对象时必须逐层复制原对象的属性，只修改需要更新的部分，绝对不能直接修改原state的任何属性。

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