React注册表单提交报错：受控组件转为非受控组件问题排查

错误原因分析 #

你遇到的A component is changing a controlled input to be uncontrolled错误，核心是代码里的变量名混淆、属性不匹配以及状态更新逻辑错误，导致输入控件绑定的state值变为undefined，让受控组件转为非受控组件。

具体问题与修复步骤 #

1. 变量名大小写混淆 #

通过useState定义的状态变量是小写开头的register，但handle和提交函数里错误用了大写开头的Register（未定义变量），会导致状态更新时被覆盖为undefined。
修复：把函数里所有Register改成register。

2. Input的name属性带多余空格 #

密码和手机号输入框的name属性前面多了空格（" User_password"、" User_number"），和state里的字段名User_password、User_number不匹配，无法正确更新对应字段状态。
修复：去掉name属性里的前置空格，改为"User_password"和"User_number"。

3. 状态更新语法错误 #

setRecords调用方式错误，直接展开数组元素作为参数会导致状态更新异常，正确做法是传入新数组或用函数式更新。
修复：用setRecords(prevRecords => [...prevRecords, newRecord])追加新记录。

修正后的完整代码 #

import React, { useState } from "react";
import "./Style.css";
const SignUp = () => {
  const [register, setRegister] = useState({
    User_name: "",
    User_number: "",
    User_password: "",
    User_email: "",
  });
  const [records, setRecords] = useState([]);

  const handle = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setRegister({ ...register, [name]: value });
  };

  const handleRegister = (e) => {
    e.preventDefault();
    // 提交时校验所有字段是否填写完整
    const { User_name, User_number, User_password, User_email } = register;
    if (!User_name || !User_number || !User_password || !User_email) {
      alert("请填写所有必填字段");
      return;
    }
    const newRecord = { ...register, id: new Date().getTime().toString() };
    setRecords(prevRecords => [...prevRecords, newRecord]);
    // 清空表单
    setRegister({
      User_name: "",
      User_number: "",
      User_password: "",
      User_email: "",
    });
  };

  return (
    <>
      <section className="bg">
        <div className="container">
          <form onSubmit={handleRegister}>
            <div>
              <label htmlFor="username">Username:</label> <br />
              <input
                type="text"
                name="User_name"
                id="username"
                value={register.User_name}
                required
                onChange={handle}
              />
            </div>
            <div>
              <label htmlFor="email">Email:</label>
              <br />
              <input
                type="email"
                name="User_email"
                id="email"
                value={register.User_email}
                required
                onChange={handle}
              />
            </div>
            <div>
              <label htmlFor="password">password:</label>
              <br />
              <input
                type="password"
                name="User_password"
                id="password"
                value={register.User_password}
                required
                onChange={handle}
              />
            </div>
            <div>
              <label htmlFor="phone">Mobile No:</label>
              <br />
              <input
                type="number"
                name="User_number"
                id="phone"
                value={register.User_number}
                required
                onChange={handle}
              />
            </div>
            <button type="submit">Register</button>
          </form>
        </div>
      </section>
    </>
  );
};

export default SignUp;

额外补充：提交校验增强 #

上面代码已添加基础非空校验，你还可以按需扩展：

• 手机号格式校验：用正则验证手机号规范
• 密码强度校验：要求长度≥6位，包含字母和数字
• 邮箱格式校验：利用type="email"自带校验，或自定义正则加强

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