使用react-hook-form Controller包裹Material UI RadioGroup时选中值始终为NULL

你的代码存在两处关键冲突，导致无法正确获取RadioGroup的选中值，以下是修正方案：

问题根源 #

1. 同时使用Controller的field属性和register方法，两者互斥会覆盖绑定逻辑
2. 手动重复定义onChange和value，破坏了field自带的双向绑定机制

修正后的完整代码 #

import * as React from "react";
import {
  FormControl,
  FormControlLabel,
  FormHelperText,
  Radio,
  RadioGroup
} from "@mui/material";
import { useFormContext, Controller } from "react-hook-form";

interface IOptionTypes {
  id: string;
  label: string;
  value: string;
  desc?: string;
}

interface IFormElementTypes {
  name: string;
  options: IOptionTypes[];
}

export default function RadioFieldElement({
  name,
  options
}: IFormElementTypes) {
  const {
    control,
    formState: { errors }
  } = useFormContext();

  return (
    <Controller
      name={name}
      defaultValue=""
      control={control}
      render={({ field }) => (
        <FormControl fullWidth>
          <RadioGroup
            {...field}
            row
          >
            {options.map((option) => (
              <FormControlLabel
                key={option.id}
                value={option.value}
                control={<Radio />}
                label={option.label}
              />
            ))}
          </RadioGroup>
          <FormHelperText>{String(errors[name]?.message ?? "")}</FormHelperText>
        </FormControl>
      )}
    />
  );
}

修正说明 #

• 移除{...register(name)}：Controller已通过control属性完成表单控件注册，重复使用register会覆盖绑定逻辑，导致值无法同步
• 移除手动定义的onChange和value：{...field}已包含onChange、value、name等必要属性，直接展开即可完成双向绑定
• 确保defaultValue类型与选项value一致：这里设置为空字符串，与选项的string类型匹配，避免类型不匹配引发的异常

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