Добавить разбиение на страницы в API, называемое источником данных в React - PullRequest
Новая
       4

Добавить разбиение на страницы в API, называемое источником данных в React

1 голос
/ 27 мая 2020

Я только что наткнулся на идею приложения для реагирования на получение данных API Coronavirus и их отображение в табличном формате. Будучи новичком, я смог получить базовые данные c, но не смог применить разбиение на страницы. Нужна помощь.

Класс приложения; 

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

Класс 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>
  );
};

1 Ответ

0 голосов
/ 27 мая 2020

Я использую 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>
            );
        }
    }
}
...