React中遍历数组生成单选按钮时，如何使用受控RadioGroup？

你的代码存在三个核心问题，导致触发"需使用受控RadioGroup"的提示：

1. 错误地在单个Radio上配置受控属性
   你给每个Radio单独设置了checked、onChange和独立的name，但MaterialUI的RadioGroup设计是由容器统一管理选中状态和变更事件，内部Radio只需提供value即可，无需单独处理受控逻辑。

2. RadioGroup未配置受控核心属性
   没有给RadioGroup添加value（绑定当前选中值）和onChange（处理选中变更），这是受控RadioGroup的必填配置。

3. 状态存储方式不符合单选逻辑
   你用radiovalues对象存储每个选项的布尔值，但单选框的特性是同一组只能选中一个选项，只需存储当前选中的value字符串即可，无需记录每个选项的选中状态。

修复后的代码示例 #

// 先在组件内定义状态和变更函数
const [selectedValue, setSelectedValue] = useState(defaultValue);

const handleRadioChange = (event) => {
  setSelectedValue(event.target.value);
};

// 渲染部分
<FormControl>
  <RadioGroup
    name="row-radio-buttons-group"
    value={selectedValue}
    onChange={handleRadioChange}
  >
    <FormLabel>{radiolabel}</FormLabel>
    {radiodata.map((item) => (
      <div key={item} style={{ display: "flex", flexDirection: "row" }}>
        <FormControlLabel
          control={<Radio size="small" value={item} />}
          label={item}
        />
      </div>
    ))}
  </RadioGroup>
</FormControl>

关键说明 #

• RadioGroup通过value绑定当前选中的选项值，onChange统一处理所有单选按钮的点击事件，更新状态。
• 内部Radio只需要指定value，无需再设置checked、onChange和独立name，RadioGroup会自动同步选中状态，并保证同一组内单选互斥。
• 状态selectedValue直接存储当前选中的选项字符串，符合单选组件的逻辑，也简化了状态管理。

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