如何修复:渲染方法的返回部分中的变量在第二次调用渲染时不更新 React

Question

我正在从 Flask api 异步提取数据到 React，并在收到数据后更新页面。新数据会正确更新状态，重新呈现页面会显示新数据，只是当数据项数增加时，分页类中的页数不会同时增加。

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

这是我的异步组件DidMount调用，它更新了我的状态：

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 已增加，因此页数应该会增加，但事实并非如此。

Answer 1

我可以看到一些问题： - 异步组件DidMount((？ 使用内部函数： componentDidMount() { async invokeApi() { //api call here } invokeApi(); }

• 在这个用例中，我认为不需要设置状态两次。提取变量并使用它一次以提高可读性。

请注意，setState是异步的，不能保证订单。更新组件DidUpdate以有效地处理不需要的重新渲染。