在 componentDidMount 中设置 state 时，React 应用程序未显示来自 api 的数据

Question

I have some react code where i'm trying to show a list of data in a table. This is the code. The console.log call in the getPagedData displays the correct results in the console but the render is not showing anything.

Seems to be a timing issue with asynchronous call but im stumped. Any ideas why?

import React, { Component } from 'react';
import { getSearchResults} from '../services/searchService';
import AircraftsTable from '../components/aircraftsTable';
import Pagination from '../components/common/pagination';
import qs from 'qs';

class SearchResults extends Component {
    state = { 
        aircrafts: [],
        totalCount:0,
        currentPage: 1,
        pageSize: 10
     }

     componentDidMount(){
        const { aircrafts, totalCount} = this.getPagedData();
     
        this.setState(aircrafts, totalCount);
    }

     handlePageChange = page => {
        this.setState({ currentPage: page });
      };

    getPagedData = async () => {
        const queryString = this.getQueryString();
        const searchResults = await getSearchResults(queryString);

        const aircrafts = searchResults.data.aircrafts;
        const totalCount = searchResults.data.totalCount;

        console.log(aircrafts, totalCount);
        
        return [ aircrafts, totalCount ];    
    }
 
    getQueryString(){
        let criteria = this.props.history.location.state?.data;
        criteria.currentPage = this.state.currentPage;
        criteria.pageSize = this.state.pageSize;    
        const criteriaString = qs.stringify(criteria);

        return criteriaString;
    }

    render() { 
        const { aircrafts, totalCount, pageSize, currentPage} = this.state;

        return ( 
            <React.Fragment>
            <AircraftsTable
                aircrafts={aircrafts}
            />
            <Pagination
            itemsCount={totalCount}
            pageSize={pageSize}
            currentPage={currentPage}
            onPageChange={this.handlePageChange}
          />
          </React.Fragment>
         );
    }
}
 
export default SearchResults;

Answer 1

Since you're returning an array and not an object from getPagedData you need to update your componentDidMount to:

componentDidMount(){
  const [aircrafts, totalCount] = this.getPagedData();
  this.setState({ aircrafts, totalCount });
}

Answer 2

In getPageData function you are returning an array. But you are destructuring an object

return [ aircrafts, totalCount ];

instead of this

return { aircrafts, totalCount };