React使用useState仅更新嵌套对象指定字段保留其余参数的问题

问题原因 #

你当前的nextAction更新逻辑存在两个问题：

• 额外新增了不存在的value字段，没有指向你要更新的type层级
• 没有正确从原state中解构nextAction的已有值，容易丢失原有字段

修正方案 #

直接修改nextAction分支的更新逻辑，先解构保留原nextAction的所有字段（包括by），再单独覆盖type字段即可：

const handleInputValue = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
  const { name, value } = e.target;

  if (name === 'firstName') {
    setValues({
      ...values,
      [name]: value,
    });
    validate({ [name]: value });
  } else if (name === 'company') {
    setValues({
      ...values,
      [name]: { name: name, id: value },
    });
    validate({ [name]: value });
  } else if (name === 'nextAction') {
    setValues({
      ...values,
      nextAction: {
        ...values.nextAction, // 保留by等原有所有字段
        type: { // 仅更新type字段
          id: value,
          name: name
        }
      }
    });
    validate({ [name]: value });
  }
}

如果你的type.name不需要用当前表单元素的name属性值，可以根据实际业务逻辑调整对应的赋值即可。

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