如何使用 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
    };
  });
};