1. В вашем случае сюда:
this.setState((prevState) =>({
currentPage : prevState.currentPage + 1
}), this.updateOrders);
2. Я бы реализовал нормальный пагинатор отдельным компонентом и передавал бы в него текущую страницу, количество страниц из состояния родительского компонента и колбек
getActivePage. В который бы пагинатор передавал новую страницу. Вот в колбеке уже и смотрите если страница та же то
return, а выход за границы пагинации( страница меньше минимальной и больше максимальной) должен обрабатывать сам пагинатор.
Вашу функцию showNextPage надо преобразовать в
getActivePage, которая будет передаваться в пагинатор:
getActivePage = activePage => {
if (this.state.currentPage === activePage) return;
this.setState({
currentPage : activePage,
}, this.updateOrders);
};
3. Хранить
state в компоненте абсолютно нормально и надо если другие части приложения(не дочерние компоненты) ничего не должны об этом состоянии знать. Пагинация как раз тот случай. fetch лучше вынести в каталог
api и передавать компоненту как свойство. Но еще лучше использовать
redux +
redux-saga и передавать в компонент экшен
fetchOrders через
mapDispatchToProps и
connect. В результате в компоненте останется:
fetchOrders = () => {
const {
currentPage,
ordersPerPage,
sortBy,
sortDirection,
} = this.state;
this.props.fetchOrders({
page: currentPage,
limit: ordersPerPage,
sortBy,
sortDirection,
});
};
Параметры запроса условные. Написал типичные для кейса пагинация + сортировка.
Еще название
updateOrders не совсем корректное, я бы назвал функцию
fetchOrders.
А инлайновые функции используйте только если они будут вызываться другим компонентом.
