使用 useState 一次更新状态值

Question

下面的代码给了我一个警告： 组件正在将受控输入更改为不受控。这可能是由于值从已定义更改为未定义引起的，这不应该发生。在组件的生命周期内决定使用受控输入元素还是不受控输入元素。 当我更改密码或用户名时。

我无法弄清楚为什么会出现此错误。 谁能告诉我为什么我会收到这个错误....

import React, { useState } from "react";

const Login = () => {
  const [login, setLogin] = useState({ user: "", password: "" });

  const handleChange = (e) => {
    setLogin({ [e.target.name]: e.target.value });
  };

  return (
    <div>
      User Name{" "}
      <input
        onChange={handleChange}
        type="text"
        name="username"
        value={login.user}
      />
      Password{" "}
      <input
        onChange={handleChange}
        type="password"
        name="password"
        value={login.password}
      />
      <button>Login</button>
    </div>
  );
};

Answer 1

与类组件的setState() 不同，使用useState() 设置功能组件中的状态不会将更新对象与之前的状态合并。用useState() 设置状态替换前一个。这就是为什么useState() 中的状态可以是数组、对象或原语。

在您的情况下，当您使用状态 - setLogin({ [e.target.name]: e.target.value }); 时，您正在替换整个状态，并且实际上删除了其他字段的值。您应该传播登录状态的先前值，并仅覆盖您正在更改的字段的值。

const { useState } = React;

const Login = () => {
  const [login, setLogin] = useState({ user: "", password: "" });

  const handleChange = (e) => {
    setLogin(login => ({ ...login, [e.target.name]: e.target.value }));
  };

  return (
    <div>
      User Name{" "}
      <input
        onChange={handleChange}
        type="text"
        name="user" // this should be user and not username
        value={login.user}
      />
      Password{" "}
      <input
        onChange={handleChange}
        type="password"
        name="password"
        value={login.password}
      />
      <button>Login</button>
    </div>
  );
};

ReactDOM.render(
  <Login />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>