我正在使用reactjs在表中进行自定义分页。我在这里遇到错误“无法将类型'number'的参数分配给'never'类型的参数。TS2345” 。我在这里遇到错误“ pageNumbers.push(i);类型为'number'的参数不能分配给类型为'never'的参数” 。我正在使用react并进行自定义分页
import React, { Component } from "react"
class ListUserComponent extends Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
users: [],
AllData: [],
category: {},
message: null,
total: null,
per_page: null,
current_page: 1
};
this.AllDataList = this.AllDataList.bind(this);
}
componentDidMount() {
this.AllDataList(this.requesDATA());
this.makeHttpRequestWithPage(1);
}
makeHttpRequestWithPage = async pageNumber => {
const response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});
const data = await response.json();
this.setState({
users: data.data,
total: data.total,
per_page: data.per_page,
current_page: data.page
});
}
render() {
let users, renderPageNumbers;
if (this.state.users !== null) {
users = this.state.users.map(user => (
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.first_name}</td>
<td>{user.last_name}</td>
</tr>
));
}
const pageNumbers = [];
if (this.state.total !== null) {
for (let i = 1; i <= Math.ceil(this.state.total / this.state.per_page); i++) {
pageNumbers.push(i);
}
renderPageNumbers = pageNumbers.map(number => {
let classes = this.state.current_page === number ? styles.active : '';
return (
<span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
);
});
}
return (
<Grid className="CoomonT">
<div>
<table >
<thead>
<tr>
<th>S/N</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
{users}
</tbody>
</table>
<div>
<span onClick={() => this.makeHttpRequestWithPage(1)}>«</span>
{renderPageNumbers}
<span onClick={() => this.makeHttpRequestWithPage(1)}>»</span>
</div>
</div
);
}
}
export default ListUserComponent;