页面更改后复选框状态为空

Question

我有一个如下所示的对象数组：

 const columns = [
    {
      key: "Source_campname",
      title: "TS Camp Name",
      customElement: function (row) {
        return (
          <FormControlLabel
            control={
              <Checkbox
                checked={checkbox[row.id]}
                key={row.id}
                onChange={() =>
                  handleChange(row.Source_campname, row.id, checkbox)
                }
                name={row.id}
              />
            }
            label={[row.Source_campname]}
          />
        );
      }
    },
    {
      key: "Tracker_campname",
      title: "TR Camp Name"
    }
  ];

你可以在上面看到一个“handleChange”函数，这是用来检查/取消选中组件的 handleChange 函数如下所示：

const handleChange = (name, campid) => {
    setCheckBox({ ...checkbox, [campid]: !checkbox[campid] });
  };

您还可以在上面看到一个“customElement”函数。这个函数在另一个名为 ThanosTable 的 React 组件中呈现。我将在下面写下发生 customElement 渲染的部分代码。

return (
   <> columnArray[0].customElement(row) </>
);

最后你会得到 10 个复选框，并且你有几个页面可以使用分页进行更改。

请在此处查看我的代码框链接以获取工作示例： https://codesandbox.io/s/magical-germain-8tclq

现在我有两个问题：

问题1） 如果我选择了几个复选框，然后转到第二页并返回，复选框状态为空，原始复选框未选中。不知道为什么会这样。我该如何防止呢？

问题 2) 复选框状态的值在 customElement 函数中始终是一个空对象 ({})。您可以通过检查 customElement 函数中的 console.log(checkbox) 来查看这一点（检查代码框中的第 76 行）。我认为它应该是一个带有选中复选框项的数组。

Answer 1

useEffect 挂钩体现了组件的所有生命周期事件。因此，如果您尝试在useEffect 中设置checkbox，它将无限更新组件，因为更新状态调用useEffect。这可能就是为什么您会看到自己的状态不断被重置的原因。

相反，在渲染之前使用行初始化您的状态。

const rows = [
  ...
];
  
let checkboxObj = {};

// if (rows) {
rows.forEach((e) => {
  checkboxObj[e.id] = false;
});
const [checkbox, setCheckBox] = useState(checkboxObj);