动态加载默认值：在React组件中处理异步数据与表单初始化

import React, { useState, useEffect } from 'react';
import { useForm, Controller } from 'react-hook-form';
import {
  FormControl,
  FormLabel,
  RadioGroup,
  FormControlLabel,
  Radio,
} from '@mui/material'; // 假设使用MUI组件

function MyFormComponent() {
  const [defaultData, setDefaultData] = useState({});
  const [loading, setLoading] = useState(true); // 初始时设置为true，表示正在加载
  const { control } = useForm({
    defaultValues: defaultData, // 关键：将fetched数据作为默认值
  });

  // ...
}

  useEffect(() => {
    // 模拟后端请求
    const fetchDefaultGender = async () => {
      try {
        // 假设从后端获取到 { gender: "1" } 或 { gender: "2" }
        const response = await new Promise((resolve) =>
          setTimeout(() => resolve({ gender: "1" }), 1000)
        ); // 模拟1秒延迟
        setDefaultData(response);
      } catch (error) {
        console.error("Error fetching default data:", error);
        // 可以根据需要处理错误，例如显示错误消息
      } finally {
        setLoading(false); // 无论成功或失败，都结束加载状态
      }
    };

    fetchDefaultGender();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  if (loading) {
    return <p>数据加载中...</p>;
  }

  // 数据加载完成后，渲染表单
  return (
    <form>
      <Controller
        control={control}
        name="gender"
        defaultValue={defaultData.gender} // 使用从后端获取的默认值
        render={({ field }) => (
          <FormControl component="fieldset">
            <FormLabel id="gender-radio-buttons-group-label">性别</FormLabel>
            <RadioGroup
              aria-labelledby="gender-radio-buttons-group-label"
              value={field.value || ''} // 确保值不为undefined，避免受控组件警告
              onChange={(event) => field.onChange(event.target.value)}
              name="radio-buttons-group"
            >
              <FormControlLabel value="1" control={<Radio />} label="女" />
              <FormControlLabel value="2" control={<Radio />} label="男" />
            </RadioGroup>
          </FormControl>
        )}
      />
      {/* 其他表单元素 */}
    </form>
  );

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

function MyFormComponent() {
  const [defaultData, setDefaultData] = useState({});
  const [loading, setLoading] = useState(true);

  // 初始化 useForm，此时 defaultValues 可能为空对象，但会在数据加载后重新渲染
  const { control, handleSubmit, reset } = useForm({
    defaultValues: {
      gender: '' // 可以先给一个初始空值，或者让它由defaultData完全决定
    }
  });

  useEffect(() => {
    const fetchDefaultGender = async () => {
      try {
        // 模拟后端请求，假设返回 { gender: "1" }
        const response = await new Promise((resolve) =>
          setTimeout(() => resolve({ gender: "1" }), 1500) // 模拟1.5秒延迟
        );
        setDefaultData(response);
        // 在数据获取后，使用reset方法更新表单的默认值
        // 这确保了在数据加载完成后，表单能够正确地使用这些默认值进行初始化
        reset(response); 
      } catch (error) {
        console.error("Error fetching default data:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchDefaultGender();
  }, [reset]); // 添加reset到依赖数组，尽管通常reset是稳定的

  const onSubmit = (data) => console.log(data);

  if (loading) {
    return <p>数据加载中...</p>;
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="gender"
        // defaultValue={defaultData.gender} // 如果使用reset(response)，这里可以省略defaultValue，或者作为备用
        render={({ field }) => (
          <FormControl component="fieldset" margin="normal">
            <FormLabel id="gender-radio-buttons-group-label">性别</FormLabel>
            <RadioGroup
              aria-labelledby="gender-radio-buttons-group-label"
              {...field} // 展开field对象，包含value, onChange等
              name="radio-buttons-group"
            >
              <FormControlLabel value="1" control={<Radio />} label="女" />
              <FormControlLabel value="2" control={<Radio />} label="男" />
            </RadioGroup>
          </FormControl>
        )}
      />
      <Button type="submit" variant="contained" color="primary">
        提交
      </Button>
    </form>
  );
}

export default MyFormComponent;