Javascript 在循环打印时切换“不适用于材质ui”复选框

我试图每行打印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>
                ))}

我尝试过的是，因为我的行是动态变化的，所以我创建了

state

变量条目，带有as

rowName+复选框标签之一，所以当在复选框上触发
onChange
时，它应该会改变状态，并且需要切换复选框

但是复选框没有被切换

编辑在CODESANDBOX中剪切的添加样本

请帮忙。
thx请删除
==1？false:true
from
已选中
，因为在
onChange
中您正在设置
布尔值

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

代码沙盒：

编辑1

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

请删除
==1？false:true
from
已选中
，因为在
onChange
中您正在设置
布尔值

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

代码沙盒：

编辑1

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

checked
是
复选框上的布尔值。看看这里：请带上一个工作代码段，如果你有一个代码段清楚地显示了你的问题，它会比没有代码段更快地解决你的问题，例如，你可以从代码中创建一个代码段sandbox@NishargShah你好您好，我已根据您的请求添加了。
选中
是
复选框
上的布尔值。看看这里：请带上一个工作代码段，如果你有一个代码段清楚地显示了你的问题，它会比没有代码段更快地解决你的问题，例如，你可以从代码中创建一个代码段sandbox@NishargShah您好，您好，我已经按照您的要求添加了。非常感谢。我自己也收到了这个，但问题是，我一直在将所有这些复选框状态存储在
checked
状态变量中，作为
array
，因此当触发checkbox onChange事件时，我想更改该特定项的值，我发现很难使用
useffect
并检查
条件（如果
选中）[row.roleCode+
\u readAccess
]
然后做点什么，不要忘记添加依赖项[checked]但是，
useffect
是在渲染时发生的，我实际上需要在
onChange
事件时在
checkBox
上设置状态变量，正如我所说，添加checked的依赖项，所以每次当checkBox值更改时，useffect都会调用对不起，我的坏，您介意编辑我的snadbox吗？非常感谢我自己也得到了这个，但问题是我一直在将所有这些复选框状态存储在
checked
状态变量中，作为
array
，因此当触发checkbox onChange事件时，我想更改该特定项的值，我发现很难使用
useffect
并检查
条件
如果
checked[row.roleCode+
\u readAccess
]
然后做点什么，别忘了添加依赖项[checked]但是，
useffect
是在渲染时发生的，我实际上需要在
onChange
事件时在
checkBox
上设置状态变量，正如我所说，添加checked的依赖项，所以每次当checkBox值更改时，useffect都会调用对不起，我的坏你介意编辑我的snadbox吗？