时间戳

首页 > 解决方案 > 材质ui单选按钮组中的Reactjs不受控制的组件错误

javascript - 材质ui单选按钮组中的Reactjs不受控制的组件错误

问题描述

我是使用 ReactJS 的初学者。我的材质 UI 中的组件单选按钮组出现错误。我有一个值为布尔值的单选按钮。

当我尝试单击单选按钮中的值时，它没有选择，但onchange函数的控制台日志被触发，并且将显示如下错误：Material-UI: A component is changed the default value state of an uncontrolled RadioGroup after正在初始化。要抑制此警告，请选择使用受控 RadioGroup。

这是我的完整代码：

<Grid item>                        
    <RadioGroup row aria-label="privateEntity" name="privateEntity" defaultValue={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>

这是我的 onchange 函数：

const changePrivateEntity = (event, value) => {
    event.persist();
    // console.log(value);
    let x = value === 'true' ? true : false;    
    setState((prev) => ({
      ...prev,
      privateEntityDefined: true,
      privateEntity: x,
      inputErrors: {
        ...prev.inputErrors,
        privateEntity: false,
      },
      inputHelpTexts: {
        ...prev.inputHelpTexts,
        privateEntity: '',
      },
    }));
  };

这是我的状态初始化：

const [state, setState] = useState({
    privateEntity: selectedRecord ? selectedRecord.agency.private_entity : null,
    privateEntityDefined: !!selectedRecord,
})

标签： javascriptreactjsmaterial-uiradio-group

解决方案

value因为你没有传递RadioGroup组件所以它会显示这个警告：

只需更新defaultValue到value

value={state.privateEntity}

推荐阅读