我如何在 React 的嵌套对象中设置值？

Question

如何在用户输入时将文本输入的值设置为选项[0].title？我尝试了很多方法并得到错误。请帮我解决这个问题。

       const [options, setOptions] = useState({
         0: {
           title: "",
         },
         2: {
           title: "",
          1: {
           title: "",
         },    },
         3: {
           title: "",
         },
         title: "",   });
     
       let name, value;
     
       const handleChange = (e) => {
         name = e.target.name;
         value = e.target.value;
         setOptions({ ...options, [name]: value });   };


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

Answer 1

您只需在 object 中编辑标题：

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

如果您需要目标名称的先前信息，也可以在 object 中展开：

setOptions({ ...options, [name]: { ...options[name], title: value } });

Answer 2

完整的工作代码，

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

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

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

Answer 3

我尝试在 codesandbox 上查看并找到了解决方案 -
您在此处更新的名称是字符串，json 具有数字键。这就是它不会在标题节点上更新的原因。你也从来没有说过.title = value，这就是为什么值直接更新到选项[0]元素

的原因

export default function App() {
  const [options, setOptions] = useState({
    0: {
      title: ""
    },
    2: {
      title: "",
      1: {
        title: ""
      }
    },
    3: {
      title: ""
    },
    title: ""
  });
  const handleChange = (e) => {
    const name = e.target.name,
      value = e.target.value;
    let updatedOptions = { ...options };
    updatedOptions[Number(name)].title = value;
    setOptions(updatedOptions);
  };
  return (
    <div className="App">
      <input
        type="text"
        name="0"
        value={options[0].title}
        onChange={handleChange}
        required
        placeholder="something"
        icon="check_box_outline_blank"
      />
    </div>
  );
}

我如何在 React 的嵌套对象中设置值？

How can i set value in nested object in React?

state

reactjs