React中如何给嵌套对象赋值？如何将输入框内容更新到options[0].title？

问题原因 #

1. 初始options的结构存在语法错误，键为2的对象内部错误嵌套了键为1的对象，层级混乱
2. 核心错误出在handleChange的更新逻辑：你直接将options[name]（也就是options['0']）整体替换为输入框的字符串值，原本options[0]是包含title属性的对象，替换后变为普通字符串，后续访问options[0].title会直接抛出类型错误

修复代码 #

1. 修正初始state结构

const [options, setOptions] = useState({
  0: {
    title: "",
  },
  1: {
    title: "",
  },
  2: {
    title: "",
  },
  3: {
    title: "",
  },
  title: "",
});

2. 重写handleChange更新逻辑

采用函数式更新拿到最新的state，只修改对应层级的title属性，不破坏原有对象结构：

const handleChange = (e) => {
  const name = e.target.name;
  const value = e.target.value;
  setOptions(prevState => ({
    ...prevState,
    [name]: {
      ...prevState[name],
      title: value
    }
  }));
};

3. 输入框组件无需修改，保持原有写法即可

return (
  <TextInput
    type="text"
    name="0"
    value={options[0].title}
    onChange={handleChange}
    required
    placeholder="something"
    icon="check_box_outline_blank"
  />
)

内容的提问来源于stack exchange，提问作者Md. Joynal Alam