循环打印时切换对 material ui 复选框不起作用

Question

我正在尝试每行打印 4 个复选框，其中这些复选框的行和值是动态出现的（行数可能会有所不同）

下面是我的 jsx 代码

matrix.map((row, index) => (
                  <TableRow key={index}>
                    <TableCell align="left">
                      {row.roleDescription}
                    </TableCell>
                    <TableCell align="right">
                      <FormControlLabel
                        control={
                          <Checkbox
                            onChange={(e) =>
                              setChecked({
                                ...checked,
                                [e.target.name]: e.target.checked,
                              })
                            }
                            name={row.roleCode + `_readAccess`}
                            checked={(e) => checked[e.target.name]}
                            color="primary"
                          />
                        }
                        label="Read"
                      />
                    </TableCell>
                    <TableCell align="right">
                      <FormControlLabel
                        control={
                          <Checkbox
                            value={
                              row.writeAccess === null ? 0 : row.writeAccess
                            }
                            onChange={(e) => {}}
                            name="readAccess"
                            color="primary"
                          />
                        }
                        label="Write"
                      />
                    </TableCell>
                    <TableCell align="right">
                      <FormControlLabel
                        control={
                          <Checkbox
                            value={
                              row.checkerAccess === null
                                ? 0
                                : row.checkerAccess
                            }
                            onChange={(e) =>
                              setMatrixForm({
                                ...setMatrixForm,
                                checkerAccess: e.target.checked,
                              })
                            }
                            checked={
                              row.writeAccess &&
                              row.writeAccess !== "" &&
                              row.writeAccess === 1
                                ? true
                                : false
                            }
                            name="checkerAccess"
                            color="primary"
                          />
                        }
                        label="Checker"
                      />
                    </TableCell>
                    <TableCell align="right">
                      <FormControlLabel
                        control={
                          <Checkbox
                            checked={
                              row.readAccess &&
                              row.readAccess !== "" &&
                              row.readAccess === 1
                                ? true
                                : false
                            }
                            name="readAccess"
                            color="primary"
                          />
                        }
                        label="Maker"
                      />
                    </TableCell>
                  </TableRow>
                ))}

获取 matix 数据后，我正在设置状态变量 const[checked, setChecked] = useState([]) 如下

.then((rec) => {
    if (rec.status === 200) {
      let chk = [];

      rec.data.data.map((item, idx) => {
        var obj = {};
        obj[item.roleDescription + `_readAccess`] = item.readAccess;
        chk.push(obj);
        obj[item.roleDescription + `_writeAccess`] = item.writeAccess;
        chk.push(obj);
        obj[item.roleDescription + `_checkerAccess`] = item.checkerAccess;
        chk.push(obj);
        obj[item.roleDescription + `_makerAccess`] = item.makerAccess;
        chk.push(obj);
      });

      setChecked(chk);



    }
  })

我尝试过的是因为我的行动态变化我创建了 state 变量条目 rowName + one of check box label ，所以当 onChange 在 CheckBox 上触发时它应该改变状态并且需要切换复选框。

但是复选框没有被切换，

编辑 CODESANDBOX 中截取的添加示例 sample code

Pelse 帮助。 谢谢

Answer 1

请从 checked 中删除 === 1 ? false : true 因为在 onChange 中您正在设置 boolean

setChecked({
    ...checked,
    [e.target.name]: e.target.checked
})

Codesandbox：https://codesandbox.io/s/wonderful-paper-lvcwe?file=/src/Demo.jsx

编辑 1

useEffect(() => {
   console.log("checked called");
}, [checked]);