如何修复:当第二次调用render时,render方法的return部分中的变量没有更新

我从FlaskAPI中提取数据以异步反应,并在收到数据后更新页面。新数据正确地更新了状态,重新呈现页面将显示新数据,但当数据项的数量增加时,分页类中的页面数也不会增加。

我已经在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>

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

由于状态被更新,并且再次调用render并打印出totalJobs增加了,所以页面的数量应该增加,但是没有增加。