使用 useState 和 prev 状态更新状态的问题答案

【问题标题】：problem with updating state with useState and prev state使用 useState 和 prev 状态更新状态的问题
【发布时间】：2020-05-11 10:23:51
【问题描述】：

我的代码是这样的：

const [registryFormState, setRegistryFormState] = useState({
    email: null,
    username: null,
    password: null,
    confirmPassword: null,
  });

  const changeFormHandler = (value, inputIdentify) => {
    switch (inputIdentify) {
      case 'email':
        return setRegistryFormState((prevState) => ({
          ...prevState,
          email: value,
        }));
      case 'username':
        return setRegistryFormState((prevState) => ({
          ...prevState,
          username: value,
        }));
      case 'password':
        return setRegistryFormState((prevState) => ({
          ...prevState,
          password: value,
        }));
      case 'confirmPassword':
        return setRegistryFormState((prevState) => ({
          ...prevState,
          confirmPassword: value,
        }));
      default:
        return;
    }
  };

但是当我只更改 email 和 console.log() registryFormState 时，所有属性值都会更改为相同的值

【问题讨论】：

请为此使用codesandbox.io 创建一个small demo 以显示正在发生的问题。出于演示目的，只需使用一个对象属性，如 { email: null }
我觉得不错。你确定 inputIdentity 的值是正确的吗？问题也可能出在您使用状态的位置（控制台日志）。控制台日志需要有权访问新状态。你能给我看看吗？
为了读取和重构的目的，你可以考虑使用 return { ...prevState, [inputIdentify]: value, }，而不是 switch case

标签： javascript reactjs forms web-applications react-hooks

【解决方案1】：

您可以使用registryFormState 来解构，而不是像这样使用prevState：

import React from "react";

export default function Lol() {
  const [registryFormState, setRegistryFormState] = React.useState({
    email: null,
    username: null,
    password: null,
    confirmPassword: null
  });

  const changeFormHandler = (value, inputIdentify) => {
    switch (inputIdentify) {
      case "email":
        setRegistryFormState({
          ...registryFormState,
          email: value
        });
        break;
      case "username":
        setRegistryFormState({
          ...registryFormState,
          username: value
        });
        break;
      case "password":
        setRegistryFormState({
          ...registryFormState,
          password: value
        });
        break;
      case "confirmPassword":
        setRegistryFormState({
          ...registryFormState,
          confirmPassword: value
        });
        break;
      default:
        break;
    }
  };

  return (
    <div>
      <input onChange={e => changeFormHandler(e.target.value, "email")} />
      <input onChange={e => changeFormHandler(e.target.value, "username")} />
      <input onChange={e => changeFormHandler(e.target.value, "password")} />
      <input
        onChange={e => changeFormHandler(e.target.value, "confirmPassword")}
      />
      <button onClick={() => console.log(registryFormState)}>Submit</button>
    </div>
  );
}

【讨论】：