在 React 中为 API 调用数据源添加分页

Question

我刚刚偶然发现了一个反应应用程序的想法，即获取冠状病毒 API 数据并将其显示为表格格式。作为初学者，我能够获取基本数据，但无法应用分页。需要一些帮助。

应用类；

    class App extends Component {
  render() {
    return (
      <div className='App'>
        {/* <Summary /> */}
        <CountryData />
      </div>
    );
  }
}

国家数据类； CountryData类用于api调用和挂载表组件。

class CountryData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      Countries: [],
    };
  }

  componentDidMount() {
    const url = 'https://api.covid19api.com/summary';
    fetch(url, {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((result) => {
        this.setState({
          isLoaded: true,
          countryData: result.Countries,
        });
        console.log(result);
      });
    console.log('Component mounted!');
  }

  render() {
    const { isLoaded } = this.state;

    console.log('Rendering started!');

    if (!isLoaded) {
      return <div>Loading...CountryData</div>;
    } else {
      return (
        <div className='App'>
          <a className='navbar-brand' href='./'>
            Covid-19 Statistics
          </a>
          <Table countryData={this.state.countryData} />

        </div>
      );
    }
  }
}

表格组件； 所有国家数据日志都通过这个表格组件显示。

const Table = ({ countryData, loading }) => {
  return (
    <table className='Table'>
      <thead>
        <tr>
          <th>Country Name</th>
          <th>Country Code</th>
          <th>Slug</th>
          <th>New Confirmed</th>
          <th>Total Confirmed</th>
          <th>New Deaths</th>
          <th>Total Deaths</th>
          <th>New Recovered</th>
          <th>Total Recovered</th>
        </tr>
      </thead>
      <tbody>
        {countryData.map((item) => (
          <tr key={item.Country}>
            <td>{item.Country}</td>
            <td>{item.CountryCode}</td>
            <td>{item.Slug}</td>
            <td>{item.NewConfirmed}</td>
            <td>{item.TotalConfirmed}</td>
            <td>{item.NewDeaths}</td>
            <td>{item.TotalDeaths}</td>
            <td>{item.NewRecovered}</td>
            <td>{item.TotalRecovered}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Answer 1

我正在使用mui-datatable，因为它具有默认的分页功能。请看这个例子：

import React from "react";
import MUIDataTable from "mui-datatables";

export default class CountryData extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            Countries: [],
        };
    }
    columns = ["Country", "CountryCode", "Slug", "NewConfirmed", "TotalConfirmed", "NewDeaths", "TotalDeaths",
        "NewRecovered", "TotalRecovered"];

    componentDidMount() {
        const url = 'https://api.covid19api.com/summary';
        fetch(url, {
            method: 'GET',
        })
            .then((response) => response.json())
            .then((result) => {
                this.setState({
                    isLoaded: true,
                    countryData: result.Countries,
                });
                console.log(result);
            });
        console.log('Component mounted!');
    }

    render() {
        const {isLoaded} = this.state;

        console.log('Rendering started!');

        if (!isLoaded) {
            return <div>Loading...CountryData</div>;
        } else {
            return (
                <div className='App'>
                    <a className='navbar-brand' href='./'>
                        Covid-19 Statistics
                    </a>
                    {/*<Table countryData={this.state.countryData}/>*/}
                    <MUIDataTable columns={this.columns} data={this.state.countryData}></MUIDataTable>

                </div>
            );
        }
    }
}