MERN CRUD编辑用户时预填充的表单输入框无法编辑修改

问题场景 #

• 技术栈：MERN（MongoDB + Express + React + Node.js）
• 实现目标：开发用户模块CRUD功能，在用户信息编辑页拉取MongoDB存储的用户数据，预填充到表单输入框，实现管理员进入编辑页时自动加载已有用户信息的效果
• 异常表现：预填充后的name、email输入框完全无法编辑，既不能输入新内容，也不能删除原有内容
• 异常页面截图：
  

原有问题代码 #

const EditUtilizador = () => {
  const { userId } = useParams();
  const [loading, setLoading] = useState(true);
  const [userInfo, setUserInfo] = useState([]);
  const nav = useNavigate();
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => putUser(data);

  useEffect(() => {
    fetch(`/userdb/users/${userId}`, {
      headers: { Accept: "application/json" },
    })
      .then((response) => response.json())
      .then((response) => {
        setLoading(false);
        setUserInfo(response);
      });
    return () => setUserInfo([]);
  }, []);

  const putUser = (data) => {
    fetch(`/userdb/users/${userId}`, {
      headers: { "Content-Type": "application/json" },
      method: "PUT",
      body: JSON.stringify(data),
    })
      .then((response) => {
        if (response.ok) {
          alert("Utilizador atualizado com sucesso");
          nav("/admin/utilizadores");
        } else {
          alert("Algo de errado não esta certo");
        }
      })
      .catch((error) => {
        console.log("Error:", error);
      });
  };

  if (loading) {
    return (
      <>
        <HeaderAdmin />
        <h1>A carregar</h1>
      </>
    );
  }

  return (
    <>
      <HeaderAdmin />
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          type="text"
          name="name"
          value={`${userInfo.name}`}
          {...register("name")}
        />
        <br />
        <input
          type="text"
          name="email"
          value={`${userInfo.email}`}
          {...register("email")}
        />
        <br />
        <input
          type="password"
          name="password"
          placeholder="Nova Password"
          {...register("password")}
        />
        <br />
        <br />
        <button type="submit">Atualizar Conta</button>
      </form>
    </>
  );
};

问题根因 #

出现输入框锁死无法编辑的核心原因是混用了两种表单控制逻辑，产生属性冲突：

• 手动给<input>绑定了固定的value属性指向接口返回的userInfo字段，但没有配套绑定onChange事件同步更新状态。按照React的规则，这种写法本身就会生成只读的受控输入框，任何输入操作都不会改变value绑定的数据源
• 同时通过{...register("xxx")}把输入框交给react-hook-form托管，手动写死的value属性会覆盖react-hook-form内部维护的输入值状态，用户输入时触发的内部状态更新完全无法反映到输入框的value上，最终表现就是输入框完全无法修改。

修复方案 #

二选一即可，禁止两种逻辑混合使用：

方案1：使用react-hook-form原生能力做预填充（推荐，性能更优） #

既然项目已经引入了react-hook-form，直接使用库提供的reset方法做数据预填充即可，不需要手动给输入框绑定value属性，避免冲突：

1. 首先从useForm的返回值中解构出reset方法：

const { register, handleSubmit, reset } = useForm();

2. 在接口拉取到用户数据后，调用reset方法把用户数据填入表单，自动完成预填充：

.then((response) => {
  setLoading(false);
  setUserInfo(response);
  // 用接口返回值重置表单，实现预填充
  reset(response);
});

3. 删除输入框上手动绑定的value属性，让register完全接管输入框的状态管理：

<form onSubmit={handleSubmit(onSubmit)}>
  <input
    type="text"
    placeholder="Nome"
    {...register("name", { required: true })}
  />
  <br />
  <input
    type="text"
    placeholder="Email"
    {...register("email", { required: true })}
  />
  <br />
  <input
    type="password"
    placeholder="Nova Password"
    {...register("password")}
  />
  <br />
  <br />
  <button type="submit">Atualizar Conta</button>
</form>

这种写法是非受控组件模式，不会因为每次输入触发组件重渲染，性能更好，同时还能避免初始加载时输入框显示undefined的异常。

方案2：纯React受控组件模式（不推荐） #

如果一定要手动绑定value属性，就移除react-hook-form的register注册，自己维护状态更新逻辑：给每个输入框绑定onChange事件，输入时同步更新userInfo的对应字段，提交时直接取userInfo的值调用接口即可。
核心修改示例：

<input
  type="text"
  name="name"
  value={userInfo.name || ''}
  onChange={(e) => setUserInfo(prev => ({...prev, name: e.target.value}))}
/>
<br />
<input
  type="text"
  name="email"
  value={userInfo.email || ''}
  onChange={(e) => setUserInfo(prev => ({...prev, email: e.target.value}))}
/>

注意：这种写法每次输入都会触发组件重渲染，性能弱于react-hook-form的非受控模式，非必要不选择。

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