React中使用useState单次更新登录表单状态时触发受控输入转非受控警告

• React受控组件的判定逻辑为：只要<input>绑定的value从已定义的有效值（比如初始的空字符串）变为undefined，就会触发“将受控输入更改为非受控输入”的警告——因为绑定值为undefined时，React会自动把该input判定为非受控元素。
• 第一处代码缺陷：状态更新逻辑错误。useState的状态更新执行的是不可变数据的整体替换，代码中setLogin({ [e.target.name]: e.target.value })会完全丢弃原有login对象的全部属性，仅保留当前修改的单个字段，导致其他原本存在的状态字段直接变为undefined。举个实际触发场景：当你在用户名输入框输入第一个字符时，原状态是{user: "", password: ""}，执行handleChange后，新的状态被替换为仅含当前输入字段的对象，此时其他未修改的字段直接变为undefined。
• 第二处代码缺陷：输入框name属性与状态键名不匹配。用户名输入框配置的是name="username"，但初始状态中对应的存储键是user，修改用户名时实际写入状态的是username字段，原本绑定的login.user直接变为undefined，触发value值异常。

调整两处逻辑即可消除警告：

1. 更新状态时先展开保留原有所有状态属性，再覆盖当前输入对应的字段，避免其他状态被意外清空
2. 将用户名输入框的name属性修改为和状态存储的键完全一致

修复后的代码如下：

import React, { useState } from "react";

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

  const handleChange = (e) => {
    // 基于旧状态合并新值，避免覆盖原有字段
    setLogin(prevState => ({ ...prevState, [e.target.name]: e.target.value }));
  };

  return (
    <div>
      User Name{" "}
      <input
        onChange={handleChange}
        type="text"
        // 对齐状态中定义的user键名
        name="user"
        value={login.user}
      />
      Password{" "}
      <input
        onChange={handleChange}
        type="password"
        name="password"
        value={login.password}
      />
      <button>Login</button>
    </div>
  );
};

修复后两个输入框绑定的value永远是初始化的空字符串或者用户输入的有效值，不会出现undefined的异常场景，警告就会彻底消失。

内容的提问来源于stack exchange，提问作者Ayush Tyagi