如何为React Hook Form单选框从后端设置默认值？

核心思路 #

别在Controller里硬写defaultValue，等后端请求完成后，通过React Hook Form的reset方法动态设置表单字段默认值，同时修正单选框选项的value绑定错误。

具体步骤 #

1. 发起后端请求获取性别数据
   在组件挂载时调用后端接口，拿到用户的性别值（比如fetchedGender，值为"1"或"2"）。

2. 用reset方法设置默认值
   拿到后端数据后，调用reset方法更新gender字段的默认值，确保后端数据优先覆盖初始值。

3. 修正单选框选项的value绑定
   你代码里第一个FormControlLabel的value用了gender变量，这会导致选项值和表单字段值不匹配，改成固定值（比如"1"对应Female），让RadioGroup的value由field.value统一控制。

修正后的完整代码示例 #

import { useEffect } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from '@mui/material';

function YourComponent() {
  const { control, reset } = useForm();

  // 发起后端请求获取用户数据
  useEffect(() => {
    const fetchUserData = async () => {
      // 替换为实际后端接口
      const response = await fetch('/api/user/profile');
      const userData = await response.json();
      // 用后端返回的性别值重置表单字段
      reset({
        gender: userData.gender
      });
    };

    fetchUserData();
  }, [reset]);

  return (
    <Controller
      control={control}
      name="gender"
      // 移除硬编码的defaultValue，由reset动态设置
      render={({ field }) => (
        <FormControl>
          <FormLabel id="demo-radio-buttons-group-label">
            Gender
          </FormLabel>

          <RadioGroup
            aria-labelledby="demo-radio-buttons-group-label"
            value={field.value}
            onChange={(event) => {
              field.onChange(event.target.value);
            }}
            name="radio-buttons-group"
          >
            <FormControlLabel
              value="1" // 固定值对应Female，和后端返回值保持一致
              control={<Radio />}
              label="Female"
            />
            <FormControlLabel
              value="2"
              control={<Radio />}
              label="Male"
            />
          </RadioGroup>
        </FormControl>
      )}
    />
  );
}

export default YourComponent;

关键说明 #

• reset方法会覆盖表单初始值，确保后端数据返回后才设置正确的性别状态，避免初始默认值和后端数据冲突。
• 单选框选项的value必须和后端返回的字段值格式一致（比如后端用"1"表示女、"2"表示男），这样field.value才能正确匹配选中状态。
• 如果需要处理加载状态，可以添加loading变量，在请求完成前显示加载提示或暂不渲染表单。

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