改变React js中的复选框状态

Question

这是我的反应复选框代码。它来自 Material-UI

  const [checkmark, setCheckMark] = useState(false);

  const [selectedRows, setSelectedRows] = useState([]);

  const toggleAllCheck = (event) => {
    console.log("before", checkmark);
    setCheckMark(!checkmark);
    console.log("after", checkmark);
    let newSelectedRows;
    if (checkmark) {
      newSelectedRows = salesRows.map((row) => row.id);
      setSelectedRows(newSelectedRows);
      console.log("selected rows", newSelectedRows);
    }
  };

由于复选标记状态最初设置为 false，因此复选框中没有复选标记。

单击该组件后，它会显示一个复选标记。切换是因为toggleAllCheck函数。

在函数内部，首先控制台将复选标记的值记录为 false，这是可以理解的。在第二行，它将值更改为 true。这反过来又在我的复选框中打勾。

然后在第三行，我再次控制台记录复选标记的值。但它给出了错误的读数。

所以，我感到困惑的是为什么它仍然是错误的。我的想法是，状态更新发生在下一个渲染中（在其他领域也困扰着我），但是我如何在不重新渲染的情况下检查我的复选框。

此外，相同的复选标记值可以让我选中该框，尽管其控制台日志显示 false，但无法执行 if 语句。

当复选框上有勾号时，我试图保留 selectedRows，但只有当勾号被删除时，我才在第二次单击时才得到。

Answer 1

这个案例在 React 的文档中： 我已经更新了状态，但是日志记录给了我旧值

保留对您正在设置的新状态的引用，因为

setX

必然无法更新变量：

  const [checkmark, setCheckMark] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]);

  const toggleAllCheck = (event) => {
    const nextCheckmark = !checkmark;
    setCheckMark(nextCheckmark);
    let newSelectedRows;
    if (nextCheckmark) {
      newSelectedRows = salesRows.map((row) => row.id);
      setSelectedRows(newSelectedRows);
      console.log("selected rows", newSelectedRows);
    }
  };