reactjs React警告MUI:组件在初始化后正在更改非受控SwitchBase的默认选中状态

m1m5dgzv  于 2022-12-22  发布在  React
关注(0)|答案(3)|浏览(316)

我试图呈现一个默认选中值的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>
              ))}
hfsqlsce

hfsqlsce1#

使用“checked”而不是“defaultChecked”将解决此警告

ruoxqz4g

ruoxqz4g2#

在受控开关上使用defaultChecked属性时,我也会遇到同样的错误。
正如注解中提到的,您应该使用checked属性。
在文档中,它说关于defaultChecked属性:
在组件不受控制时使用
https://mui.com/api/switch/#props

uajslkp6

uajslkp63#

为了消除我的警告错误,我必须指定checked是true还是false。

<FormControlLabel
                     control={
                        !isChecked ? (
                           <Checkbox checked={false} />
                        ) : (
                           <Checkbox checked={true} />
                        )
                     }
                     label={face}
                     onChange={() => handleChange(face)}
                  />

相关问题