如何使用 useState React 正確更改 state object 值之一

Question

我正在嘗試使用 useState 掛鈎更改我的 state。 我的鈎子看起來像。

const [data, setData] = useState(initialDataState);

初始 state：

const initialDataState = {
  EMAIL_TYPE: "",
  NAME_TYPE: "",
  GENDER_TYPE: "",
  ZIP_TYPE: "",
  DEVICES_TYPE: []
};

我從 function 調用setData並使用 2 個 state 道具類型進行更改和值。 我的 function：

const handleChange = (key, value) => {
    setData(prevState => {
      return { ...prevState, ...(prevState[key] = value) };
    });
  };

結果，當我調用我的handleChange function 時，我無法正確更改值，因為無法在 prevState 中獲得正確的密鑰。

我的問題是：“如何正確更改 state 在您獲得想要更改值而不發生 state 變異的情況下”

Answer 1

您需要通過現有的 state 和您要更新的密鑰

const handleChange = (key, value) => {
  setData(prevState => {
    return {
      ...prevState,
      [key]: value
    };
  });
};