我试图呈现一个默认选中值的mui开关组件。但它不工作,我得到了警告。
MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized. To suppress this warning opt to use a controlled SwitchBase. 3 useControlled.js:27
我也尝试过设置checked
属性沿着onChange
属性,但是仍然不起作用!我不知道我在这里做错了什么。
{details.schedule.days.map((d) => (
<StyledTableRow>
<TableCell>
<Typography variant="subtitle1" fontWeight="bold">
{d.day}
</Typography>
</TableCell>
<TableCell>
<FormControlLabel
control={
<Switch
onChange={(e, checked) => {
setDetails((p) => {
let prev = { ...p };
prev.schedule?.days?.find(
(el) =>
el.day === d.day &&
(d.open = e.target.checked)
);
return prev;
});
}}
defaultChecked={d.open}
/>
}
labelPlacement="bottom"
label={d?.open ? `Open` : `Closed`}
/>
</TableCell>
</StyledTableRow>
))}
3条答案
按热度按时间hfsqlsce1#
使用“checked”而不是“defaultChecked”将解决此警告
ruoxqz4g2#
在受控开关上使用defaultChecked属性时,我也会遇到同样的错误。
正如注解中提到的,您应该使用checked属性。
在文档中,它说关于defaultChecked属性:
在组件不受控制时使用
https://mui.com/api/switch/#props
uajslkp63#
为了消除我的警告错误,我必须指定checked是true还是false。