javascript - 这可以在反应类中设置等待状态吗？

Question

嗨，我是新来的反应，我正在实施react-table。我知道如果任何道具发生变化，反应会自动呈现组件。现在，对于我的工作表，我正在尝试根据复选框隐藏和显示列上的过滤器。react-table已经提供了filterable执行此操作的选项。但我不想在我的actions专栏中显示过滤器。

这里

class JobsTable extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      isFilterable: true,
    };
  }

  componentDidMount() {
    this.getJobs();
  }


  getFormattedDate(dateString) {
    const current_datetime = new Date(dateString);
    const formatted_date =
      ('0' + current_datetime.getDate()).slice(-2) +
      '/' +
      ('0' + (current_datetime.getMonth() + 1)).slice(-2) +
      '/' +
      current_datetime.getFullYear();
    return formatted_date;
  }

  getJobs = async pageIndex => {
    pageIndex = pageIndex || 1;
    this.setState({ isLoading: true });

    const { recordsToFetch } = this.state;
    const resp = await getAllJobs(pageIndex, recordsToFetch);

    if (resp.success) {
      this.setState({
        data: resp.data.jobs,
        pages: Math.ceil(resp.data.totalRecords / recordsToFetch),
        isLoading: false,
        showPagination: resp.data.jobs.length > 0,
      });
    } else {
      this.setState({ data: [], isLoading: false, showPagination: false });
    }
    ReactTooltip.rebuild();
  };

  getCell(row) {
    let value = row.value !== undefined && row.value !== null ? row.value : '';
    if (row.column.Header === 'Submitted') {
      value = this.getFormattedDate(value);
    }
    if (row.column.Header === 'Problem Summary') {
      value = Array.isArray(value) ? value.join('. ') : value;
    }
    if (row.column.Header === 'Quotes') {
      value = JSON.stringify(value);
    }
    if (row.column.Header === 'Actions') {
      return (
        <>
          <div
            id="view"
            className="react-table-cell-style"
            style={{ display: 'inline', cursor: 'pointer' }}>
            {' '}
            <a
              rel="noopener noreferrer"
              target="_blank"
              href={`/job/${row.original.userId}/${row.original.jobId}`}>
              View
            </a>
          </div>{' '}
          <div
            id="edit"
            className="react-table-cell-style"
            style={{ display: 'inline', cursor: 'pointer' }}>
            | Edit
          </div>{' '}
          <div
            id="viewQuote"
            style={{ display: 'inline', cursor: 'pointer' }}
            className="react-table-cell-style">
            {value > 0 && `| Quote${value > 1 ? 's' : ''}`}
          </div>
        </>
      );
    }
    return (
      <div data-tip={row.column.Header + ' : ' + value} className="react-table-cell-style">
        <span>{value}</span>
      </div>
    );
  }

  getHeader(headerName, valueAccessor, sortable = true) {
    const { isFilterable } = this.state;
    const headerClassName = 'react-table-header';
    return {
      headerClassName: headerClassName,
      Header: headerName,
      accessor: valueAccessor,
      Cell: row => this.getCell(row),
      filterable: headerName === 'Actions' ? false : isFilterable,
      sortable: sortable,
      width: headerName === 'Actions' ? 140 : undefined,
    };
  }


  render() {
    let jobColumns = [
      this.getHeader('Job ID', 'jobId'),
      this.getHeader('User ID', 'userId'),
      this.getHeader('Name', 'name'),
      this.getHeader('Email', 'email'),
      this.getHeader('Submitted', 'submitted'),
      this.getHeader('Status', 'status'),
      this.getHeader('Phone Number', 'number'),
      this.getHeader('Device', 'device'),
      this.getHeader('Make', 'make'),
      this.getHeader('Model', 'model'),
      this.getHeader('Problem Summary', 'problemSummary'),
      this.getHeader('Anything else?', 'anythingElse'),
      this.getHeader('Postcode', 'postcode'),
      this.getHeader("T's Matched", 'techspertMatchedCount'),
      this.getHeader('Not Available', 'techspertNotAvailable'),
      this.getHeader('Quotes', 'quotesCount'),
      this.getHeader('Viewed Quote', 'viewedQuote'),
      this.getHeader('Chatted with T', 'isChatted'),
      this.getHeader('Got to Payment', 'gotToPayment'),
      this.getHeader('Actions', 'quotesCount', false),
    ];

    const {
      data,
      isFilterable,
    } = this.state;


    const setFilters = async () => {
      const { isFilterable } = this.state;
      await this.setState({ isFilterable: !isFilterable });
      this.getJobs();
    };

    return (
      <div className="jobsTable-Container">
        <div className="jobsTable_show-filter">
          <input
            type="checkbox"
            onChange={setFilters}
            checked={isFilterable}
            value={isFilterable}
          />
          Show Filters
        </div>
          <ReactTable
            data={data}
            columns={jobColumns}
            filterable
          />
      </div>
    );
  }
}
export default JobsTable;

我想提出的问题是，这可以在方法await中使用吗setFilters？因为如果我不这样做并调用getJobsmethood，则不会更新旧值。那么这样好吗？

标签： javascriptreactjsasync-awaitreact-table

Answer 1

这里的主要问题是getJobs依赖于状态是最新的，但由于状态更新是异步的，更新发生在调用之后getJobs。通过添加，您将调用await推迟到微任务。getJobs这可能（也可能不是！）在状态更新之后：

  ------------- time ---------->
  setState -------> state update
          await --------> getJobs

所以你的“修复”是有问题的。而是使用 的第二个参数setState，它在状态更新后被明确地调用：

 this.setState({ isFilterable: !isFilterable }, () => this.getJobs());

甚至更好，不依赖于当前状态：

 this.setState(({ isFilterable }) => ({ isFilterable: !isFilterable }), () => this.getJobs());

这将上图变为：

  setState -> state update -> getJobs