React中onBlur更新state嵌套对象属性出错如何解决

属性访问语法书写错误：代码里的["age"["from"]]逻辑是尝试从字符串值"age"上读取"from"属性，字符串不存在该自定义属性，返回结果固定为undefined。等价于你在外层状态对象上新增了一个键为undefined的属性，完全没有命中嵌套的age对象，才会出现外层挂着异常属性、内层age字段不更新的问题。

更新嵌套状态时，需要先展开外层所有原有字段，再单独展开内层age对象的原有属性，最后覆盖要修改的目标字段，修正后的代码如下：

const [advancedSearch, setAdvancedSearch] = useState({
  selectIdentify: "",
  type: "",
  gender: "",
  age: { from: "", to: "" },
});

<TextField
  label="Age From"
  type="number"
  onBlur={(e) =>
    setAdvancedSearch((data) => ({
      ...data,
      age: {
        ...data.age,
        from: e.target.value
        // 若后端要求数字类型，可写为 from: Number(e.target.value)
      }
    }))
  }
/>

<TextField
  label="Age To"
  type="number"
  onBlur={(e) =>
    setAdvancedSearch((data) => ({
      ...data,
      age: {
        ...data.age,
        to: e.target.value
        // 若后端要求数字类型，可写为 to: Number(e.target.value)
      }
    }))
  }
/>

• 更新嵌套状态时不要直接修改原对象引用，必须逐层展开保留未修改的字段，否则会丢失其他状态值
• 输入框默认返回的e.target.value是字符串类型，如果接口要求年龄为数字格式，需要手动做类型转换

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