React中如何修改嵌套结构状态对应的输入事件处理器？

原来的状态是扁平结构，现在改成了嵌套对象（每个字段包含info存储输入值、error存储错误信息），只需要调整事件处理器，针对对应字段的info属性做更新，同时保留error不变即可，修改后的代码如下：

const [input, setInput] = useState({
  name: { info: "", error: "" },
  minW: { info: "", error: "" },
});

const handlerInput = (e) => {
  const { name, value } = e.target;
  // 用函数式更新确保拿到最新状态
  setInput(prevState => ({
    // 展开原有状态，保留其他未修改的字段
    ...prevState,
    // 针对当前输入框对应的字段，展开原有对象，仅更新info属性
    [name]: {
      ...prevState[name],
      info: value
    }
  }));
}

关键说明 #

• 函数式更新：React状态更新是异步的，使用prevState参数能确保获取到最新的状态值，避免因状态滞后导致的更新错误。
• 嵌套结构保留：通过两次展开（先展开整个状态对象，再展开对应字段的子对象），既能更新目标info值，又不会清空或丢失error属性。
• 输入框匹配：确保输入框的name属性和状态中的键（name、minW）完全一致，这样[name]才能正确定位到对应的状态字段。

举个实际效果例子：当用户在name输入框输入"张三"时，状态会变为：

{
  name: { info: "张三", error: "" },
  minW: { info: "", error: "" },
}

如果后续需要设置错误信息（比如验证不通过时），逻辑类似，只需替换成更新error属性即可：

// 示例：给name字段设置错误提示
setInput(prevState => ({
  ...prevState,
  name: {
    ...prevState.name,
    error: "用户名不能为空"
  }
}));

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