Reactjs 使用useState一次更新上的状态值

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

我不知道为什么会出现这个错误。 有人能告诉我为什么我会犯这个错误吗

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>
  );
};

import React，{useState}来自“React”；
常量登录=（）=>{
const[login，setLogin]=useState（{user:，password:}）；
常数handleChange=（e）=>{
setLogin（{[e.target.name]：e.target.value}）；
};
返回(
用户名{“”}
密码{“”}
登录
);
};

与类组件的

setState（）

不同，使用

useState（）

设置功能组件中的状态不会将更新对象与以前的状态合并。使用

useState（）

设置状态替换上一个状态。这就是为什么

useState（）

中的状态可以是数组、对象或原语

在本例中，当您输入state-

setLogin（{[e.target.name]：e.target.value}）时，则替换整个状态，并实际上删除另一个字段的值。您应该分散登录状态的上一个值，并仅覆盖您正在更改的字段的值


const{useState}=React；
常量登录=（）=>{
const[login，setLogin]=useState（{user:，password:}）；
常数handleChange=（e）=>{
setLogin（login=>（{…login[e.target.name]：e.target.value}）；
};
返回(
用户名{“”}
密码{“”}
登录
);
};
ReactDOM.render(
,
根
);
与类组件的
setState（）
不同，使用
useState（）
设置功能组件中的状态不会将更新对象与以前的状态合并。使用
useState（）
设置状态替换上一个状态。这就是为什么
useState（）
中的状态可以是数组、对象或原语

在本例中，当您输入state-
setLogin（{[e.target.name]：e.target.value}）时，则替换整个状态，并实际上删除另一个字段的值。您应该分散登录状态的上一个值，并仅覆盖您正在更改的字段的值


const{useState}=React；
常量登录=（）=>{
const[login，setLogin]=useState（{user:，password:}）；
常数handleChange=（e）=>{
setLogin（login=>（{…login[e.target.name]：e.target.value}）；
};
返回(
用户名{“”}
密码{“”}
登录
);
};
ReactDOM.render(
,
根
);

是啊，我的错……我现在就去。谢谢，是的，我的错…我现在就去。谢谢Ori