React native 我怎样给桌子分页

我有以下代码来显示json文件中的数据，我有500多条记录，我希望每页显示10条记录。这是我在[代码笔][1]中的项目。我尝试了对库进行分页，但不起作用。最好的方法是什么？开放使用任何推荐的库--我几乎都试过了

---

下面是我的代码的样子

如果您使用的是钩子，那么这将起作用，否则很容易修改。基本上，只需存储您所在位置的索引，然后根据该索引获取所需的数据：

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>
);

const[index，setIndex]=React.useState（0）；
const PAGE_SIZE=10；
const tableData=cardData.data.Table.slice（索引，索引+页面大小）；
const table={tableData.map（结果=>(
{results.first_name}{results.last_name}
{results.manager}
{结果.部门}
查看详细信息
))}
常量导航=(
上
下一个
);

如果您使用的是钩子，这将起作用，否则很容易调整。基本上，只需存储您所在位置的索引，然后根据该索引获取所需的数据：

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>
);

const[index，setIndex]=React.useState（0）；
const PAGE_SIZE=10；
const tableData=cardData.data.Table.slice（索引，索引+页面大小）；
const table={tableData.map（结果=>(
{results.first_name}{results.last_name}
{results.manager}
{结果.部门}
查看详细信息
))}
常量导航=(
上
下一个
);

我相信有上百种不同的方法可以做到这一点，但为了教授力学的概念，这里有一个非常手动的版本：

{this.state.filteredData
.slice（this.state.activePage*10，（this.state.activePage+1）*10）
.map（结果=>（。。。
))}
.....
{/*分页在这里进行*/}
{this.setState（{activePage:this.state.activePage-1}}}>
上
{this.setState（{activePage:this.state.activePage+1}}}>
下一个

---

也就是说，在将数据映射到DOM元素之前，您只需获取数据的一部分，前进或后退按钮只需通过设置您已有的

activePage

状态变量来选择该部分。

我确信有上百种不同的方法来实现这一点，但只是为了教授机械原理，这是一个非常手动的版本：

{this.state.filteredData
.slice（this.state.activePage*10，（this.state.activePage+1）*10）
.map（结果=>（。。。
))}
.....
{/*分页在这里进行*/}
{this.setState（{activePage:this.state.activePage-1}}}>
上
{this.setState（{activePage:this.state.activePage+1}}}>
下一个

---

也就是说，在将数据映射到DOM元素之前，只获取数据的一部分，用于前进或后退的按钮只需通过设置已有的

activePage

状态变量来选择切片。

您可以在

索引

和

偏移量

中找到一些内容，然后创建数组块

尝试一下：

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"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“/Hello”导入Hello；
从“/response.json”导入cardData；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
常数偏移=5；
console.log（cardData）；
此.state={
名称：“反应”，
索引：0，
抵消，
chunks:this.chunkArray（cardData.data.Table，offset）
};
}
chunkArray（输入阵列、chunkSize）{
log（“inputArray:：”，inputArray）；
常量结果=[]；
while（inputArray.length）{
push（输入阵列拼接（0，chunkSize））；
}
log（“结果：：”，results）；
返回结果；
}
handleClick（索引）{
这是我的国家({
指数
})
}
render（）{
log（this.state.chunks）；
返回(
{this.state.chunks&&this.state.chunks[this.state.index].map（结果=>(
{results.first_name}{results.last_name}
{results.manager}
{结果.部门}
))}


{this.state.chunks&&this.state.chunks.map（（项，索引）=>this.handleClick（索引）}>{index+1}}
);
}
}
渲染（供参考）

您可以沿着
索引
和
偏移量
的线条创建一些内容，然后创建数组的块

尝试一下：

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"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“/Hello”导入Hello；
从“/response.json”导入cardData；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
常数偏移=5；
console.log（cardData）；
此.state={
名称：“反应”，
索引：0，
抵消，
chunks:this.chunkArray（cardData.data.Table，offset）
};
}
chunkArray（输入阵列、chunkSize）{
log（“inputArray:：”，inputArray）；
常量结果=[]；
while（inputArray.length）{
push（输入阵列拼接（0，chunkSize））；
}
log（“结果：：”，results）；
返回结果；
}
handleClick（索引）{
这是我的国家({
指数
})
}
render（）{
log（this.state.chunks）；
返回(
{this.state.chunks&&this.state.chunks[this.state.index].map（结果=>(
{results.first_name}{results.last_name}
{results.manager}
{结果.部门}
))}