Как рекурсивно принимать json через API?

Question

[Funky_Rhyme]

Нахожусь в процессе изучения React. Есть API, который возвращает JSON файл разбитый на страницы, ссылки на последующие страницы есть в самом JSON.
Я пытаюсь понять как рекурсивно вызывать функцию с последующей конкатенацией (или чем-то подобным), чтобы получить разом все данные. На данный момент получается получить либо первую страницу, либо последнюю.

const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async (url : string) => {
      const res = await fetch(url);
      const json = await res.json();
      if(json.pagination.links.next){
        /* Что-то мб тут надо написать */
      }
      setData(json.data);
    };
    fetchData("https://gorest.co.in/public/v1/users");
  }, [data]);

Answer 1

[Aetae]

Условно как-то так:

useEffect(() => {
  const fetchData = async (url: string, data: any[] = []) => {
    const res = await fetch(url);
    const json = await res.json();
    if(json.pagination.links.next){
      await fetchData(json.pagination.links.next, data)
    }
    data.push(json.data);
    return data;
  };
  
  fetchData("https://gorest.co.in/public/v1/users").then(setData);
}, [url]);

в data будет массив.

Кстати рекурсия тут не обязательна:

useEffect(() => {
  const fetchData = async (url: string) => {
    let data: any[] = [];

    do {
      const res = await fetch(url);
      const json = await res.json();

      data.push(json.data);

      url = json.pagination.links.next;
    } while (url);

    return data;
  };

  fetchData("https://gorest.co.in/public/v1/users").then(setData);
}, [url]);

Ну и вместо any - расставить твои типы надо.

Comments

[Funky_Rhyme]

В качестве типа у меня реализован интерфейс, который содержит в себе необходимые поля JSON, однако в
fetchData(URL).then(setData);
setData жалуется, что:

Аргумент типа "Dispatch<SetStateAction<never[]>>" нельзя назначить параметру типа "(value: Data[]) => ...

Так же не совсем понимаю почему мы в конце передаем [url], можете пояснить этот момент ?

[Aetae]

Funky_Rhyme,
1. Потому что в state у тебя never[]- т.е. массив без типа, в который нельзя положить ничего.
const [data, setData] = useState<Data[]>([]);

2. Потому что если туда класть data, то он будет запускаться каждый раз как изменилась data, а data будет меняться каждый раз как он запущен. Т.е. получится бесконечная рекурсия.
Если так и задумано, то можно вернуть data.
url я туда поставил, потому что это обычное поведение - меняется адрес запроса - делаем его, однако если url всегда один, то, конечно, стоит его от-туда убрать. useEffect с пустым массивом сработает один раз - при старте компонента.

[Funky_Rhyme]

Aetae, Спасибо большое ! Стало значительно яснее )