reactjs 某个组件正在更改要控制的SwitchBase的非受控检查状态,元件不应从非受控切换到受控

nhn9ugyo  于 2023-10-17  发布在  React
关注(0)|答案(3)|浏览(103)

我有一个MUI复选框:

<Checkbox
    checked={rowValues[row.id]}
    onChange={() => {
                       const temp = { ...rowValues, [row.id]: !rowValues[row.id] };
                       setRowValues(temp);
              }}
    inputProps={{ 'aria-label': 'controlled' }}
/>

有一个选择所有按钮

<Button
    onClick={async () => {
                            isAllSelected = !isAllSelected;
                            const tmp = await setAllValues(isAllSelected);
                            setRowValues(tmp);
                          }}
    size="small"
    variant="contained"
>
{isAllSelected ? 'Unselect All' : 'Select All'}
</Button>

这两个都使用了rowValues whoose结构,看起来像这样:

{
625fd0bc4163c339b4235286: true
627df6084067debf4de42287: true
629a481d848843b1baaf7945: true
6260feb706684d04a43da863: true
62809135dbf57c3ee8d7efd4: true
}

与默认值和初始化相关的代码:

const [rowValues, setRowValues] = useState([]);
    let temp = [];
    async function setAllValues(value) {
        await stableSort(rows, getComparator(order, orderBy))
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .forEach((row) => {
                temp = { ...temp, [row.id]: value };
            });
        console.log('| temp', temp);
        return temp;
    }
    React.useEffect(() => {
        setAllValues(false).then(setRowValues);
    }, []);

当我点击全部选择按钮时,对应ID的所有值都被更改为true。现在对于复选框中选中的 prop ,我将其设置为相应ID的值(true或false)。我得到了一个错误:
index.js:1 Material-UI:某个组件正在更改要控制的SwitchBase的非受控检查状态。元件不应从不受控切换到受控(反之亦然)。决定在组件的使用寿命内使用受控或非受控SwitchBase元素。状态的性质在第一次渲染期间确定。如果值不是undefined,则认为是受控的。

h5qlskok

h5qlskok1#

这是因为你的初始值是undefined/null。用''代替,这应该可以解决问题

2izufjch

2izufjch2#

我认为这是由于初始状态值发生的,尝试将所有复选框的初始值更改为false而不是undefined,然后我认为这将是确定的。

u7up0aaq

u7up0aaq3#

对于MUI <Switch>组件,我必须使用?? false而不是''

const [notification, setNotification] = useState(user?.notification ?? false);

....

const handleChangeNotification = (event) => {
    setNotification(event.target.checked ?? false);
}

在JSX部分:

<Switch
      checked={notification}
      onChange={handleChangeNotification}
    />

相关问题