无法更新分页中的页面限制 - React JS？答案

【问题标题】：Unable to update the page limit in pagination - React JS?无法更新分页中的页面限制 - React JS？
【发布时间】：2019-10-31 13:04:18
【问题描述】：

我正在使用以下链接中的分页组件，因为我无法根据用户选择将显示多少行来更新 pageLimit 值。

https://scotch.io/tutorials/build-custom-pagination-with-react

https://codesandbox.io/s/competent-river-xneqb

最初页面限制为 10。一旦用户单击按钮，页面限制将更改为 15。但即使更新组件后，分页页面限制也不会改变。

   " import Pagination from "./components/Pagination";

    class App extends Component {
      state = {
        pageLimit : 10
      };

      handlePageLimit = () => {
        this.setState({pageLimit : 15})
        console.log("pagelimit inside fun",this.state.pageLimit)
      }

        return (     
                <div className="d-flex flex-row py-4 align-items-center">
                  <Pagination
                    totalRecords={this.state.totalCountries}
                    pageLimit={this.state.pageLimit}
                    pageNeighbours={1}
                    onPageChanged={this.onPageChanged}
                  />

            <button onClick={this.handlePageLimit}>Click</button>

            </div>
        );"

请帮我解决，当按钮点击页面限制应更改为 15。

【问题讨论】：

所以当你点击按钮时，它会调用handlePageLimit?它实际上是否被调用并注销console.log("pagelimit inside fun",this.state.pageLimit)？如果问题是您的控制台输出错误，那么问题是状态不是这样同步的，因此您不能调用 setState 然后在下一个期望能够立即引用新状态。您必须将 console.log 放在 componentDidUpdate 或 render 中，以便它注销新状态。如果Pagination 组件没有更新
在查看了您发布的代码框后，问题在于您获得的 Pagination 组件 - 它在构造函数中分配了一个 pageLimit 但从不查看道具更改以重新分配什么它的this.pageLimit 是。因此，在不更改Pagination 组件的情况下解决此问题的最简单方法是给它一个像<Pagination key={this.state.pageLimit} ... /> 这样的关键道具，这意味着每次页面限制发生变化时，组件都会从头开始重建，尽管这不是一个好的答案因为我们应该更改分页组件，但这似乎是一个延伸

标签： reactjs

【解决方案1】：

本指南有很多问题，最好找到另一个现成的解决方案并从头开始实施。如果你想继续使用它，你应该从这里开始：

根据 Tom Finney 的评论，您需要使用 componentDidUpdate，然后从那里手动更新渲染函数中的内容：

componentDidUpdate(prevProps) {
    if (prevProps.pageLimit !== this.props.pageLimit) {
      this.pageLimit = this.props.pageLimit;
      this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);
      this.gotoPage(1); // If you want to reset to first page on limit change
    }
  }

完全不值得努力。

【讨论】：

嗨@plamenh，你能帮我“更新 currentPage 值”
在移动下一页时它工作正常，但是当我选择行数时 currentPage 应该是“1”，但它会激活上一个 currentPage..如何解决这个问题跨度>
只需要在componentDidUpdate函数中加入这一行：this.gotoPage(1);
我试过了，但它不起作用。能不能给点别的建议