收到错误消息:无法将类型'number'的参数分配给'never'类型的参数。 TS2345

时间:2020-06-10 10:37:03

标签: reactjs

我正在使用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)}>&laquo;</span>
          {renderPageNumbers}
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&raquo;</span>
        </div>

      </div
    );
  }
}

export default ListUserComponent;

0 个答案:

没有答案