Question

我有以下代码来显示json文件中的数据，我有500多个记录，我希望每页显示10条记录。这是我在code pen中的项目。我尝试了反应分页库，但这不起作用。做这个的最好方式是什么？开放使用推荐的任何库-我几乎尝试了所有库。

这是我的代码的样子

在这里我导入本地json文件

import cardData from "../Data/response.json";

这是json文件中的代码显示数据

        {cardData.data.Table.map(results => (
          <div className="col-sm-3">
                <h3>
                  {results.first_name} {results.last_name}
                </h3>
                <h3 >{results.manager}</h3>
                <div className="row">
                  <div className="col-md-3 col-sm-6"> {results.Department}</div>
                </div>

                <Link
                  to={{ pathname: `/cards/${results.id}`, state: results }}
                  className={`card-wrapper restore-${results.id}`}
                >
                  View Detail
                </Link>
              </div>

        ))}

我的json文件看起来像

"data": {
    "Table": [
      {
        "id": "1001",
        "first_name": "Alez",
        "Department": "IT"
      },
      {
        "id": "1002",
        "first_name": "Baro",
        "Department": "Accounting"
      },
      {
        "id": "1003",
        "first_name": "Tata",
        "Department": "IT"
      }
  ]
}

Answer 1

您可以在index和offset的基础上创建一些东西，然后创建数组的块。

尝试一下：

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import cardData from "./response.json";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    const offset = 5;
    console.log(cardData);
    this.state = {
      name: "React",
      index: 0,
      offset,
      chunks: this.chunkArray(cardData.data.Table, offset)
    };
  }

  chunkArray(inputArray, chunkSize){
    console.log("inputArray:: ", inputArray);
    const results = [];  
    while (inputArray.length) {
      results.push(inputArray.splice(0, chunkSize));
    }
    console.log("results:: ", results);
    return results;
  }

  handleClick(index) {
    this.setState({
      index
    })
  }

  render() {
    console.log(this.state.chunks);
    return (
      <div>
        {this.state.chunks && this.state.chunks[this.state.index].map(results => (
          <div className="col-sm-3">
            <h3>
              {results.first_name} {results.last_name}
            </h3>
            <h3>{results.manager}</h3>
            <div className="row">
              <div className="col-md-3 col-sm-6"> {results.Department}</div>
            </div>

            <a
              to={{ pathname: `/cards/${results.id}`, state: results }}
              className={`card-wrapper restore-${results.id}`}
              href={`/cards/${results.id}`}
            >
              View Detail
            </a>
          </div>
        ))}
        <br />
        { this.state.chunks && this.state.chunks.map((item, index) => <button onClick={()  => this.handleClick(index)}>{index + 1}</button>) }
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

这是您推荐的Working Code Sample Demo。

Answer 2

如果您使用的是钩子，则可以使用，否则可以轻松进行调整。基本上，只需存储您所在位置的索引，然后根据该索引获取所需的数据：

const [index, setIndex] = React.useState(0);
const PAGE_SIZE = 10;
const tableData = cardData.data.Table.slice(index, index + PAGE_SIZE);

const table = {tableData.map(results => (
          <div className="col-sm-3">
                <h3>
                  {results.first_name} {results.last_name}
                </h3>
                <h3 >{results.manager}</h3>
                <div className="row">
                  <div className="col-md-3 col-sm-6"> {results.Department}</div>
                </div>

                <Link
                  to={{ pathname: `/cards/${results.id}`, state: results }}
                  className={`card-wrapper restore-${results.id}`}
                >
                  View Detail
                </Link>
            </div>
        ))}

const navigation = (
    <div>
        <div disabled={index <= 0 ? true : false} onClick={() => setIndex(index - PAGE_SIZE)}>Prev</div>
        <div disabled={index <= cardData.data.Table.length ? true : false} onClick={() => setIndex(index + PAGE_SIZE)}>Next</div>
    </div>
);

Answer 3

我敢肯定有一百种不同的方法可以做到这一点，但是只是为了讲授力学原理，这是一个非常手动的版本：

  {this.state.filteredData
    .slice(this.state.activePage * 10, (this.state.activePage + 1) * 10)
    .map(results => ( ...
  ))}

.....

  {/*Pagination goes here */}

  <button onClick={() => {this.setState({activePage: this.state.activePage - 1})}} >
    prev</button>
  <button onClick={() => {this.setState({activePage: this.state.activePage + 1})}} >
    next</button>

也就是说，在将数据映射到DOM元素之前，您只需要获取一部分数据，而前进或后退按钮只需通过设置您已经拥有的activePage状态变量来选择该部分。

我如何在react.js中分页表

3 个答案: