使用 ReactJS 自定义分页

Question

我有这个项目用于对通过 API 接收的 json 数据进行分页。问题是我的代码以某种方式给了我一个“切片”错误（使用其他 API 时并非如此，例如https://corona.lmao.ninja/v2/countries）

Items.js：

import React from 'react';
import { ITEMS_PER_PAGE } from '../utils/constants';
import Data from './Data';

const Items = ({ items, page }) => {
  const startIndex = (page - 1) * ITEMS_PER_PAGE;
  const selectedItems = items.slice(startIndex, startIndex + ITEMS_PER_PAGE);
  return (
    <React.Fragment>
      {selectedItems.map(item => (
        <Data key={item.country} {...item} />
      ))}
    </React.Fragment>
  );
};

export default Items;

Data.js：

import React from 'react';

const Data = ({ Data }) => {
  const { high, low } = Data;
  return (
    <div class="data">
      <p>
        <strong>Test:</strong> {high} {low}
      </p>
      <hr />
    </div>
  );
};

export default Data;

分页.js：

import React from 'react';

const Pagination = ({ totalPages, handleClick, page }) => {
  const pages = [...Array(totalPages).keys()].map(number => number + 1);

  return (
    <div className="numbers">
      {pages.map(number => (
        <a
          key={number}
          href="/#"
          onClick={() => handleClick(number)}
          className={`${page === number && 'active'}`}
        >
          {number}
        </a>
      ))}
    </div>
  );
};

export default Pagination;

App.js：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Pagination from './components/Pagination';
import Items from './components/Items';
import { ITEMS_PER_PAGE } from './utils/constants';

const App = () => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    axios
      .get('https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&limit=10')
      .then(response => {
        const result = response.data;
        setItems(result);
        setTotalPages(Math.ceil(result.length / ITEMS_PER_PAGE));
        setIsLoading(false);
      });
  }, []);

  const handleClick = number => {
    setPage(number);
  };

  return (
    <div>
      <h1>Pagination Demo</h1>
      {isLoading ? (
        <div className="loading">Loading...</div>
      ) : (
        <React.Fragment>
          <Items items={items} page={page} />
          <Pagination
            totalPages={totalPages}
            handleClick={handleClick}
            page={page}
          />
        </React.Fragment>
      )}
    </div>
  );
};

export default App;

我的问题似乎是其他 API 缺少的东西：https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&limit=10

错误：Items.js 中的TypeError: items.slice is not a function

任何帮助将不胜感激！

Answer 1

来自 API 的响应有 2 个嵌套的 Data 键，所以它必须是这样的：

const result = response.data;
setItems(result.Data.Data);

Data.js

import React from 'react';

const Data = ({ high, low }) => {

  return (
    <div class="data">
      <p>
        <strong>Test:</strong> {high} {low}
      </p>
      <hr />
    </div>
  );
};

export default Data;

演示：https://stackblitz.com/edit/react-arqaxj