Разбивка на запросы API в Javascript / React?

Question

У меня есть приложение, которое извлекает данные из API mov ie. Он возвращает 20 элементов со страницы 1. Как бы я go добавил возможность разбивки на страницы и разрешил пользователю нажимать кнопку, которая увеличивает значение номера страницы и возвращает элементы с этой страницы?

Вот мой API call:

export const API_KEY = process.env.REACT_APP_MOVIES_API;
export const baseURL = 'https://api.themoviedb.org/3/movie/';
export const language = '&language=en';
export const region = '&region=gb';
export const currentPage = 1;

export const fetchTopRatedMovies = async () => {
  try {
    const response = await fetch(
      `${baseURL}top_rated?api_key=${API_KEY}${language}&page=${currentPage}${region}`
    );
    const data = await response.json();
    console.log('TOP RATED', data);
    return data;
  } catch (err) {
    console.log(err);
  }
};

Я думаю, мне нужно добавить 1 к currentPage по запросу, однако я не уверен, как это настроить.

Функция вызывается с помощью useEffect в React в функциональный компонент.

 const [apiData, setApiData] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const { results = [] } = apiData;

  useEffect(() => {
    setLoading(true);
    fetchTopRatedMovies().then((data) => setApiData(data));
    setLoading(false);
  }, []);

Answer 1

Обычно это делается путем добавления currentPage к состоянию, например

const [currentPage, setCurrentPage ] = useState(1);

Так что, когда вы хотите изменить его, с помощью щелчка или прокрутки, используйте setCurrentPage и в вашем вызове API он по-прежнему будет использовать currentPage, но теперь он будет ссылаться на тот, что в штате.

Answer 2

Вам нужно сделать currentPage параметром fetchTopRatedMovies, чтобы вы могли передавать значение динамического c из вашего функционального компонента.

Вы должны контролировать текущую просматриваемую страницу в состоянии ваш функциональный компонент, например, такой:

const [currentPage, setCurrentPage] = useState(1);

Затем вы можете добавить кнопку для рендеринга функционального компонента, которая в обработчике onClick устанавливает новое значение currentPage и запускает вызов API. Примерно так:

<MyButton onClick={() => {
    setCurrentPage(currentPage + 1);
    fetchTopRatedMovies(currentPage).then(data => setApiData(data));
}}>

Я говорю приблизительно, потому что вместо немедленного вызова fetchTopRatedMovies вы можете использовать useEffect для повторного запуска запроса API при каждом изменении состояния / пропеллера. Или, что еще лучше, инициируйте запрос API, используя useEffect, только когда есть существенное изменение состояния / поддержки.

Метод fetchTopRatedMovies должен быть улучшен следующим образом:

export const fetchTopRatedMovies = async (pageNumber) => {
  try {
    const response = await fetch(
      `${baseURL}top_rated?api_key=${API_KEY}${language}&page=${pageNumber}${region}`
    );
    const data = await response.json();
    console.log('TOP RATED', data);
    return data;
  } catch (err) {
    console.log(err);
  }
};

Этот подход можно распространить на все остальные параметры вашего вызова API.

Надеюсь, это поможет !