RHF×MaterialUIのラジオボタンにAPIで取得した初期値を設定したい

Question

実現したいこと

RHF×MaterialUIで作成しているフォームのラジオボタン項目に、
APIで取得した値を初期値として設定したい

発生している問題・分からないこと

react-hook-formとMaterialUIを利用してフォームを作成しています。
ラジオボタン項目にAPIで取得した値を初期値として設定したいですが、やり方がわかりません。

該当のソースコード

import React, { useState } from 'react'
import {
  Container,
  Stack,
  TextField,
  FormControl,
  FormControlLabel,
  RadioGroup,
  Radio,
} from '@mui/material';
import { useForm, Controller } from 'react-hook-form'
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup'

import client from '../lib/api/client';

const UserInfo = () => {

  // フォームの型
  class UserFormData {
    name: string = ''
    sex: number = 1
  }

  // バリデーションルール
  const UserSchema = yup.object({
    name: yup
      .string()
      .required(),
    sex: yup
      .number()
      .required()
  });

  // 初期表示データ取得
  const initDisplayData = async (userId: string) => {
    try {
      const result = await client.get(`users/${userId}`);
      const data = result.data.data;
      return {
        name: data.name,
        sex: data.sex,
      } as UserFormData;
    } catch (error) {
      console.log("取得失敗");
      return new UserFormData();
    }
  }

  const {
    register,
    control,
    formState: { errors },
  } = useForm({
    mode: 'all',
    resolver: yupResolver(UserSchema),
    defaultValues: async() => initDisplayData('1') // TODO:
  })
  
  return (
    <Container maxWidth="sm" sx={{ pt: 5 }}>
      <Stack spacing={3}>

      <TextField
          required
          label="氏名"
          InputLabelProps={{ shrink: true }}
          {...register('name')}
          error={"name" in errors}
          helperText={errors.name?.message}
        />

        <Controller
          name='sex'
          control={control}
          render={({field}) => (
            <FormControl>
              <RadioGroup
                row
                aria-label="sex"
                defaultValue={2}  // TODO: ここにAPIからの初期値を設定したい
                {...field}
              >
                <FormControlLabel value={1} control={<Radio />} label="男性" />
                <FormControlLabel value={2} control={<Radio />} label="女性" />
                <FormControlLabel value={3} control={<Radio />} label="その他・未回答" />
              </RadioGroup>
            </FormControl>
          )}
        />
      </Stack>
    </Container>
  )
}
export default UserInfo

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

defaultValue={2} と固定値を設定している箇所を
defaultValue={field.value} や defaultValue={getValues('sex')} としてもラジオボタンは未選択の状態でした。

また、initDisplayData の中で「sex」というstateを設定し、defaultValueに渡してもラジオボタンは何も選択されていない状態でした。

TextFieldの項目の方には取得した初期値が設定されます。

補足

react, react-hook-formの扱い自体あまり慣れていないため、的外れなことをしていたらすみません。

Answer 1

自己解決。reset使うことで初期値が反映されました。
とりあえずやりたいことは実現できたけど、これで合ってるんだろうか。。

import React, { useState } from 'react'
import {
  Container,
  Stack,
  TextField,
  FormControl,
  FormControlLabel,
  RadioGroup,
  Radio,
} from '@mui/material';
import { useForm, Controller } from 'react-hook-form'
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup'

import client from '../lib/api/client';

const UserInfo = () => {

  // フォームの型
  class UserFormData {
    name: string = ''
    sex: number = 1
  }

  // バリデーションルール
  const UserSchema = yup.object({
    name: yup
      .string()
      .required(),
    sex: yup
      .number()
      .required()
  });

  const [data, setData] = useState<UserFormData>(new UserFormData);

  useEffect(() => {
    (async() => {
      const response = await initDisplayData(1);
      setData(response)
    })()
  },[])

  useEffect(() => {
    reset(data)
  }, [data])

  // 初期表示データ取得
  const initDisplayData = async (userId: string) => {
    try {
      const result = await client.get(`users/${userId}`);
      const data = result.data.data;
      return {
        name: data.name,
        sex: data.sex,
      } as UserFormData;
    } catch (error) {
      console.log("取得失敗");
      return new UserFormData();
    }
  }

  const {
    register,
    control,
    reset,
    formState: { errors },
  } = useForm({
    mode: 'all',
    resolver: yupResolver(UserSchema),
    defaultValues: {
       sex: data.sex
    }
  })
  
  return (
    <Container maxWidth="sm" sx={{ pt: 5 }}>
      <Stack spacing={3}>

      <TextField
          required
          label="氏名"
          InputLabelProps={{ shrink: true }}
          {...register('name')}
          error={"name" in errors}
          helperText={errors.name?.message}
        />

        <Controller
          name='sex'
          control={control}
          render={({field}) => (
            <FormControl>
              <RadioGroup
                row
                aria-label="sex"
                value={filed.value}
              >
                <FormControlLabel value={1} control={<Radio />} label="男性" {...register('sex')} />
                <FormControlLabel value={2} control={<Radio />} label="女性" {...register('sex')} />
                <FormControlLabel value={3} control={<Radio />} label="その他・未回答" {...register('sex')} />
              </RadioGroup>
            </FormControl>
          )}
        />
      </Stack>
    </Container>
  )
}
export default UserInfo