React中Material UI RadioGroup单选按钮组非受控组件报错求解

报错根因 #

• 组件状态模式混用：你当前给RadioGroup使用了defaultValue属性，这个属性仅用于非受控组件场景，只会在组件初始化时读取一次值，后续你修改state.privateEntity不会同步到RadioGroup的内部状态，且初始化后修改defaultValue的绑定值就会触发你遇到的 uncontrolled 组件警告。
• 选中状态不同步：因为RadioGroup处于非受控模式，内部状态和你维护的state.privateEntity完全脱节，所以即使onChange触发更新了state，UI上也不会呈现选中状态。
• 额外说明：Material UI 的RadioGroup会自动将所有选项的value值序列化为字符串，所以即使你给FormControlLabel传了布尔类型的value={true}/value={false}，onChange回调拿到的value也会是字符串格式的"true"/"false"，你当前处理函数里的类型转换逻辑是正确的，不需要修改。

可行解决方案 #

直接将RadioGroup从非受控模式切换为受控模式即可，仅需修改RadioGroup的属性：把defaultValue替换为value，让组件的选中值完全由你的state控制。

修改后的RadioGroup代码如下：

<Grid item>                        
    <RadioGroup 
      row 
      aria-label="privateEntity" 
      name="privateEntity" 
      {/* 替换defaultValue为value，绑定state中的值 */}
      value={state.privateEntity} 
      onChange={changePrivateEntity}
    >
        <FormControlLabel value={true} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="YES" />
        <FormControlLabel value={false} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="NO" />
    </RadioGroup>
</Grid>

如果初始化时state.privateEntity为null，你希望RadioGroup默认不选中任何选项，上述代码即可正常运行；如果需要默认选中某一项，可在useState初始化时给privateEntity赋值为true或false即可。

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