javascript - 在 React 中为 API 调用数据源添加分页
问题描述
我刚刚偶然发现了一个反应应用程序的想法,即获取冠状病毒 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>
);
};
解决方案
我正在使用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>
);
}
}
}
推荐阅读
- python-3.x - 将键/值字符串列表转换为map python
- python - 如何修复“检查输入时出错:预期 input_1 有 2 个维度,但得到的数组形状为 (32, 168, 5)”
- c# - 使用反向 For 循环时如何判断我是否到达列表的开头?
- laravel - InvalidArgumentException:未找到查看 [主题。]
- javascript - 如何通过字节数组创建文件对象
- ios - AVFoundation- .audioDeviceInUseByAnotherClient 在调用 CXCallObserver call.hasEnded(呼叫断开)后运行
- google-apps-script - 为什么 indexOf() 不能使用谷歌表格在 .map() 内部工作?
- javascript - Angular 升级到 8 后出现拖动事件的问题。(使用 D3)
- r - 如何将字符日期(1931 年 2 月 12 日)转换为日期格式(Y、m、d)
- django - 有没有办法在 django 的另一个页面上保存数据?