Почему setTest работает только с подробным объяснением обратного вызова, если это возможно? - PullRequest
Новая
       11

Почему setTest работает только с подробным объяснением обратного вызова, если это возможно?

0 голосов
/ 08 мая 2019

Когда я играл с MUIDataTable, я обнаружил, что функция tester(){} (проверьте код хуков ниже) работает только с методом обратного вызова useState, при обычном вызове он работает только после того, как я действительно попытался выяснить, почему это происходит.но пока ничего не получится, если вы столкнулись с подобной проблемой, подобной этой, или с кем-то, кто знает причину ее возникновения, пожалуйста, сообщите мне.в компоненте на основе хуков он работает только с обратным вызовом.К вашему сведению: я знаю, что если мы используем обратный вызов в хуке, он ставится в очередь, что помогает нам избежать замены того же хука старым хуком при последовательном вызове.

код с крючками 

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>
    );
  }
}
...