Как лучше сделать api call, зависящий от current state?

Question

[deemaagog]

Привет. Хочу добавить пагинацию к таблице. Для того чтобы обратитсься к api нужно получить номер сдедующей странице. В документации реакт написано, что "this.state.currenPage" будет неправильно, нужно использовать prevState.

showNextPage = () => {
this.setState((prevState) =>({
currentPage : prevState.currentPage + 1
}));
}

updateOrders = () => {

fetch(`/api/orders?limit=${this.state.limit}&offset=${this.state.currentPage * this.state.limit}`, {
method: "GET",
dataType: "JSON",
headers: {
"Content-Type": "application/json; charset=utf-8",
}
})
.then((resp) => {
return resp.json()
})
.then((data) => {
this.setState({ rows: data });
})
.catch((error) => {
console.log(error, "catch the hoop")
})
}

вопросы:
1) куда тогда воткнуть в showNextPage вызов fetch.
2) при таком вызове ведь по-любому обновится state и будет перерисовка. Но что если мне не надо обновлять? Например , при клике на "пред. страница" если currentPage = 1 то не надо ничего делать?
3) нормально ли вообще так делать, когда компонент сам делает fetch и результат хранит в своем state?

Answer 1

[Антон Спирин]

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.
А инлайновые функции используйте только если они будут вызываться другим компонентом.