如何使用 useState React 正确更改其中一个状态对象值

Question

我正在尝试使用 useState 挂钩更改我的状态。我的钩子是这样的。

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

初始状态：

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

我从函数中调用 setData 具有 2 个要更改的 props 类型的状态和值。我的函数：

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

结果是，当我调用 handleChange 函数时，我无法正确更改值，因为无法在 prevState 中获取正确的键。

我的问题是："How correctly change state in cases when you are getting key in which you want to change the value without state mutating"

Answer 1

您需要传递现有状态和要更新的密钥

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

How to change one of the state object value correctly with useState React