Question

我正在从事React Project。我在哪里通过API提取数据并在分页中显示它。实际上我想对项目中的数据进行排序，但是问题是我已经实现了数据的分页。目前，我正在获取数据并以分页显示，但是我实现了排序逻辑。当我单击表时，表头数据已排序，但存储在state中的所有数据都呈现在一页中。我想要分页中的排序数据，我是React的初学者，请有人帮我如何实现分页数据的分页。您可能还会在给定的GIF文件中看到项目流程。

Gif File ( Please Click here to see Project Flow what I want )

代码

    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:8001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Answer 1

由于您具有对api端点的直接/间接访问权限，因此应在此处进行排序，分页，过滤等操作，然后将所需的项返回给前端。分页等的调用应该是针对该特定查询的api请求。

如果您正要使用服务器端点进行分页等操作，则可能会从Redux（如果尚未使用）中受益。

IMO，如果您想保持领先地位，请学习GraphQL和React Hooks分别取消REST和React类。

ETA：

抛开生命周期调用的问题，componentWillMount（ 已弃用-移入构造函数 ）时，它将运行第一个get all parties API ，因此，在装入首页时，一切看起来都很好。

在btnClick()中，您设置了Item，但似乎没有在任何地方更改其值。我希望这可能是您的问题。

React：如何对已排序的数据进行分页

1 个答案: