如何解决：第二次调用渲染时，渲染方法的返回部分中的变量未更新

Question

我正在从Flask api中提取数据以异步地进行React，并在收到数据后更新页面。新数据正确更新了状态，并且重新渲染页面后显示了新数据，除了当数据项的数量增加时，来自我的Pagination类的页面数也没有增加。

我已在render方法中打印出新状态和新数据项的数量，因此我可以看到状态已更新并且正在调用render。

这里是渲染方法：

render() {
    console.log("Render being called!");
    console.log(this.state)
    const { job_data, currentJobs, currentPage, totalPages } = this.state;
    const totalJobs = job_data.length;
    console.log(totalJobs);  // Total jobs prints out correctly here as 800

    if (totalJobs === 0) return null;

    const headerClass = ['text-dark py-2 pr-4 m-0', currentPage ? 'border-gray border-right' : ''].join(' ').trim();

    return (
      <div className="content">
        <Grid fluid>
          <Row>
           <div className="d-flex flex-row py-4 align-items-right"> 
            // totalJobs should be updated here but isn't 
            <Pagination totalRecords={totalJobs} pageLimit={6} pageNeighbours={1} onPageChanged={this.onPageChanged} />
            </div>

这是我的异步componentDidMount调用，它会更新我的状态：

 async componentDidMount() {
    console.log("Async component componentDidMount")
    const response = await fetch('http://127.0.0.1:5000/');
    console.log("Waiting for new jobs...")
    const json = await response.json();

    this.setState({ job_data: json.eqtls }); 

    console.log(this.state.job_data)
    console.log("Got new jobs!")
    const currentJobs = this.state.job_data.slice(0, 0 + 6);
    const totalPages = 10;
    const currentPage = 1;
    this.setState({ currentPage, currentJobs, totalPages });
  }

因为状态已更新，并且渲染被再次调用并打印出totalJobs已增加，所以页面数应该增加，但实际上没有。

Answer 1

我可以看到一些问题，ems：-异步componentDidMount（）吗？使用内部函数：

    componentDidMount() {
      async invokeApi() {
        //api call here 
      }
      invokeApi();
    }

• 在这种情况下，我看不到需要两次setState。提取变量并使用一次以提高可读性。

请注意，setState是异步的，不保证顺序。更新componentDidUpdate以有效处理不需要的重新渲染。