reactjs - 如果可能的话，为什么 setTest 只适用于回调深度解释？

Question

当我在玩 MUIDataTable 时，我发现该函数 tester(){}（检查下面的钩子代码）仅适用于 useState 回调方法，通过常规调用，它仅在我真正试图弄清楚为什么会发生但到目前为止没有结果时才有效如果您是遇到过类似问题的人，或者知道其背后原因的人，请赐教。

尝试使用基于类的组件无论是否使用 setState 回调都可以正常工作，但在基于钩子的组件中，它仅适用于回调。仅供参考：我知道如果我们在钩子中使用回调，它会排队，这有助于我们避免在顺序调用时用旧钩子替换相同的钩子。

带钩子的代码

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import MUIDataTable from "mui-datatables";
import Tooltip from "@material-ui/core/Tooltip";
import EditIcon from "@material-ui/icons/Create";
import IconButton from "@material-ui/core/IconButton";

const fakeCols = ["Name", "Company", "City", "State"];
const fakeRows = [
  ["Joe James", "Test Corp", "Yonkers", "NY"],
  ["John Walsh", "Test Corp", "Hartford", "CT"],
  ["Bob Herm", "Test Corp", "Tampa", "FL"],
  ["James Houston", "Test Corp", "Dallas", "TX"]
];

export default function MUITable(props) {
  const [columns, setColumns] = useState(
    props.columns ? props.columns : fakeCols
  );
  const [test, setTest] = useState(false);
  const [rows, setRows] = useState(props.rows ? props.rows : fakeRows);
  const addRow = () => {
    setRows([
      ...rows,
      ["Joe James", "Test Corp", "Yonkers", "NY"],
      ["John Walsh", "Test Corp", "Hartford", "CT"],
      ["Bob Herm", "Test Corp", "Tampa", "FL"],
      ["James Houston", "Test Corp", "Dallas", "TX"]
    ]);
  };
  const tester = () => {
    console.log(test);
    // setTest(test => !test); THIS WORKS
      //  setTest(!test)  THIS DOES NOT WORKS
    // console.log(rows[selectedRows.data[0].dataIndex]);
  };
  const options = {
    filterType: "select",
    selectableRows: "single",
    onRowsSelect: data => {
      console.log(data);
    },
    textLabels: {},
    customToolbarSelect: selectedRows => (
      <Tooltip title="edit">
        <IconButton
          onClick={tester}
          style={{
            marginRight: "24px",
            height: "48px",
            top: "50%",
            display: "block",
            position: "relative",
            transform: "translateY(-50%)"
          }}
        >
          <EditIcon />
        </IconButton>
      </Tooltip>
    )
  };
  return (
    <div>
      {test ? <button onClick={addRow}>test</button> : null}
      <MUIDataTable data={rows} columns={columns} options={options} />
    </div>
  );
}

带类的代码

import React, { Component } from "react";
import PropTypes from "prop-types";
import MUIDataTable from "mui-datatables";
import Tooltip from "@material-ui/core/Tooltip";
import EditIcon from "@material-ui/icons/Create";
import IconButton from "@material-ui/core/IconButton";

const fakeCols = ["Name", "Company", "City", "State"];
const fakeRows = [
  ["Joe James", "Test Corp", "Yonkers", "NY"],
  ["John Walsh", "Test Corp", "Hartford", "CT"],
  ["Bob Herm", "Test Corp", "Tampa", "FL"],
  ["James Houston", "Test Corp", "Dallas", "TX"]
];
export default class MUITable extends Component {
  state = {
    columns: ["Name", "Company", "City", "State"],
    rows: [
      ["Joe James", "Test Corp", "Yonkers", "NY"],
      ["John Walsh", "Test Corp", "Hartford", "CT"],
      ["Bob Herm", "Test Corp", "Tampa", "FL"],
      ["James Houston", "Test Corp", "Dallas", "TX"]
    ],
    test: false
  };
  tester = () => {
    console.log(this.state.test);
    this.setState({ test: !this.state.test });
    console.log(this.state.test);
  };
  render() {
    const options = {
      filterType: "select",
      selectableRows: "single",
      onRowsSelect: data => {
        console.log(data);
      },
      textLabels: {},
      customToolbarSelect: selectedRows => (
        <Tooltip title="edit">
          <IconButton
            onClick={this.tester}
            style={{
              marginRight: "24px",
              height: "48px",
              top: "50%",
              display: "block",
              position: "relative",
              transform: "translateY(-50%)"
            }}
          >
            <EditIcon />
          </IconButton>
        </Tooltip>
      )
    };
    return (
      <div>
        {this.state.test ? <button>test</button> : null}
        <MUIDataTable
          data={this.state.rows}
          columns={this.state.columns}
          options={options}
        />
      </div>
    );
  }
}