如何使用統一的狀態/處理程序編輯多個文本字段？

Question

背景：

我成功地能夠使用單獨的狀態/處理程序來填充和編輯我的文本字段，但我想通過為我的許多文本字段創建統一的 state 和統一的處理程序來簡化/壓縮我的代碼。

問題：

我可以使用useEffect成功獲得正確的值，但是當我嘗試編輯其中一個文本字段時，我收到一條錯誤消息： TypeError: Cannot read property 'value' of undefined

我的代碼：

useEffect(() => {
  getDataFromApi(props.id).then((rsp) => {
    setData(rsp);
    textFields.firstItem = rsp.content?.firstItem;
    textFields.secondItem = rsp.content?.secondItem;
  });
}, []);

const [textFields, setTextFields] = useState({
  firstItem: "",
  secondItem: "",
});

const handleChangeTextField = (type) => (e) => {
  setTextFields((prevState) => ({
    ...prevState,
    [type]: e.target.value,
  }));
};

<TextField
  id="firstItem"
  value={textFields.firstItem}
  onChange={handleChangeTextField("firstItem")}
/>
<TextField
  id="secondItem"
  value={textFields.secondItem}
  onChange={handleChangeTextField("secondItem")}
/>

關於我做錯了什么的任何建議都會有所幫助！

謝謝。

Answer 1

如果您使用它，請像這樣嘗試。

  const [textFields, setTextFields] = useState({
    firstItem: "",
    secondItem: ""
  });

  const handleChangeTextField = (type) => (value) => {
    setTextFields((prevState) => ({
      ...prevState,
      [type]: value
    }));
  };

        <TextField
          id="firstItem"
          variant="filled"
          value={textFields.firstItem}
          onChange={handleChangeTextField("firstItem")}
        />
     
        <TextField
          id="secondItem"
          value={textFields.secondItem}
          variant="filled"
          onChange={handleChangeTextField("secondItem")}
        />
  

你可以在這里確認。 https://codesandbox.io/s/wizardly-davinci-3x0ui?file=/App.js:0-865