可以在React类中的设置状态上等待吗?

嗨,我是新来的人,我正在实施react-table。我知道,如果任何道具更改,则react会自动渲染组件。现在,对于我的工作表,我试图根据复选框隐藏和显示列上的过滤器。 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: [],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吗?因为如果我不这样做并调用getJobs methood,则不会更新旧值。那可以吗?

arielyangjing520 回答:可以在React类中的设置状态上等待吗?

这里的主要问题是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
,

您不应将await与setState结合使用,我认为您正在寻找的东西将是这样。

this.setState({ 
    isFilterable: !isFilterable 
},() => {
    this.getJobs()
});
本文链接:https://www.f2er.com/2964219.html

大家都在问