Javascript 将分页添加到React中称为数据源的API

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

应用程序类

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

类应用程序扩展组件{
render（）{
返回(
{/*  */}
);
}
}

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

类CountryData扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isLoaded:false，
国家：[]，
};
}
componentDidMount（）{
常量url=https://api.covid19api.com/summary';
获取（url{
方法：“GET”，
})
.then（（response）=>response.json（））
。然后（（结果）=>{
这是我的国家({
isLoaded：是的，
国家数据：结果。国家，
});
控制台日志（结果）；
});
log（'Component mounted！'）；
}
render（）{
const{isLoaded}=this.state；
log（'Rendering started！'）；
如果（！已加载）{
返回加载…国家数据；
}否则{
返回(
);
}
}
}

表格组件 所有国家/地区数据日志都通过此表组件显示

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

const Table=（{countryData，loading}）=>{
返回(
国名
国家代码
鼻涕虫
新确认
确认总数
新死亡
总死亡人数
新恢复
总回收量
{countryData.map（（项）=>(
{项目.国家}
{item.CountryCode}
{item.Slug}
{item.newconfirm}
{item.totalconfirm}
{item.newdeath}
{项目.死亡总数}
{item.NewRecovered}
{item.TotalRecovered}
))}
);
};

我使用的是

mui数据表

，因为它具有默认分页功能。请参见此示例：

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

从“React”导入React；
从“mui数据表”导入MUIDataTable；
导出默认类CountryData扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
isLoaded:false，
国家：[]，
};
}
列=[“国家”、“国家代码”、“Slug”、“新确认”、“总确认”、“新死亡人数”、“总死亡人数”，
“新恢复”、“全部恢复”]；
componentDidMount（）{
常量url=https://api.covid19api.com/summary';
获取（url{
方法：“GET”，
})
.then（（response）=>response.json（））
。然后（（结果）=>{
这是我的国家({
isLoaded：是的，
国家数据：结果。国家，
});
控制台日志（结果）；
});
log（'Component mounted！'）；
}
render（）{
const{isLoaded}=this.state；
log（'Rendering started！'）；
如果（！已加载）{
返回加载…国家数据；
}否则{
返回(
{/**/}
);
}
}
}

我使用的是

mui数据表

，因为它具有默认分页功能。请参见此示例：

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

从“React”导入React；
从“mui数据表”导入MUIDataTable；
导出默认类CountryData扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
isLoaded:false，
国家：[]，
};
}
列=[“国家”、“国家代码”、“Slug”、“新确认”、“总确认”、“新死亡人数”、“总死亡人数”，
“新恢复”、“全部恢复”]；
componentDidMount（）{
常量url=https://api.covid19api.com/summary';
获取（url{
方法：“GET”，
})
.then（（response）=>response.json（））
。然后（（结果）=>{
这是我的国家({
isLoaded：是的，
国家数据：结果。国家，
});
控制台日志（结果）；
});
log（'Component mounted！'）；
}
render（）{
const{isLoaded}=this.state；
log（'Rendering started！'）；
如果（！已加载）{
返回加载…国家数据；
}否则{
返回(
{/**/}
);
}
}
}

非常感谢，刚刚了解了我可以使用的不同react组件的最新信息。非常感谢，刚刚了解了我可以使用的不同react组件的最新信息。