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

Question

我使用以下链接中的分页组件，因为我无法根据用户选择的行数更新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。

Answer 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
}
}

完全不值得付出努力。