Блог

Я создаю компонент диаграмм, который получает данные из API в соответствии с датами, выбранными средством выбора даты.

Обрабатываются даты обработки и вызывающий API. Проблема в том, что когда данные большие (> 50 результатов), следующие данные поступают внутрь объекта в next свойстве. Я должен справиться с этим с этого next момента .

Вот как выглядят возвращаемые данные:

     average_satisfaction: 4.8307692307692305
    next: "nextURL"
    page_size: 50
    previous: null
    results: (50) [{…}, {…}]
    total_count: 130
 

Я думаю о функции, которая обрабатывает API, и я просто вызываю ее, useEffect но я не уверен, как заставить ее проверить это next , а затем получить новые данные и отправить их

  const [results, setResults] = useState([]);

  useEffect(() => {
    if (startDate.length != 0) {
      handleAPIRequest(`someURL`).then((response) => console.log(response.data));
    }
  }, [startDate, endDate]);

  function handleAPIRequest(url) {
    return axios
      .get(url)
      .then((response) => {
        setResults(response.data.results);
        // here is where response.data.next has url of next 50 results
        return response;
      });
  }
 

сохраните все результаты в состоянии, а не только данные.результаты.

   function handleAPIRequest(url) {
    return axios
      .get(url)
      .then((response) => {
        setResults(response.data);
        // here is where response.data.next has url of next 50 results
        return response;
      });
  }
 

в вашем рендере у вас может быть кнопка, подобная следующей

 return ( <button onClick={() => handleAPIRequest(response.data.next)}>Get Next</button> )
 

Когда вы нажмете кнопку, она вызовет вашу функцию handleAPIRequest со следующим URL-адресом.

Вы можете сделать то же самое с предыдущей кнопкой.

Обновление — цикл для получения всех результатов.

должно работать что-то вроде следующего.

   function handleAPIRequest(url) {
    return axios
      .get(url)
      .then( async (response) => {

        let finalResults = response.data.results;
        if (response.data.next) {
           let moreResults = await handleAPIRequest(response.data.next);
           finalResults.concat(moreResults)
        }

        // here is where response.data.next has url of next 50 results
        return finalResults;
      });
  }