如何将后端获取的当前值显示并更新到TextField表单控件中

你的问题出在react-hook-form的表单状态和本地useState未联动，且TextField的用法不符合受控组件要求，导致后端数据更新后表单未同步。下面是具体问题分析和解决方法：

问题点拆解 #

1. react-hook-form的defaultValues仅初始化一次：你在useForm里传入的defaultValues: {name: name}只会在组件首次渲染时读取name的初始值（10），后续setName更新本地state不会触发表单值更新——因为表单内部独立维护自身状态。
2. TextField误用defaultValue：当使用{...register("name")}时，react-hook-form已将TextField转为受控组件，此时设置defaultValue无效，表单值由react-hook-form统一管理。
3. useEffect依赖项错误：你把空数组写在了then的第二个参数位置，这会导致useEffect无依赖项触发无限请求，正确写法是空数组作为useEffect的第二个参数。

解决方法 #

方法1：使用reset方法更新表单值

获取到后端数据后，调用react-hook-form提供的reset方法直接同步表单值，这是最常用的方案：

const ProfileSettings = () => {
  const {
    register,
    formState: { errors },
    reset // 引入reset方法
  } = useForm({
    defaultValues: {
      name: '' // 初始值设为空或占位符
    },
  });

  useEffect(() => {
    axios.get("get-profile").then((response) => {
      // 用reset同步后端数据到表单
      reset({
        name: response.data.name
      });
    });
  }, [reset]); // 依赖项添加reset，避免无限循环

  return (
    <>
      <TextField
        id="name"
        label="姓名"
        type="text"
        variant="outlined"
        {...register("name")} // register自动处理value和onChange
      />
    </>
  );
};

方法2：异步设置defaultValues（react-hook-form v7+支持）

如果你的react-hook-form版本是v7及以上，可以直接在defaultValues中传入异步函数，自动获取后端数据作为初始值：

const ProfileSettings = () => {
  const {
    register,
    formState: { errors },
  } = useForm({
    defaultValues: async () => {
      const response = await axios.get("get-profile");
      return {
        name: response.data.name
      };
    },
  });

  return (
    <>
      <TextField
        id="name"
        label="姓名"
        type="text"
        variant="outlined"
        {...register("name")}
      />
    </>
  );
};

关键说明 #

• 移除TextField的defaultValue，因为register已经为组件绑定了受控所需的value和onChange属性，手动设置defaultValue会干扰表单状态管理。
• 确保useEffect的依赖项正确，避免不必要的重复请求。

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