reactjs - Hur kan jag iterera över listan av URL:er och göra ett anrop till servern med useSWR-hooken

Jag arbetar på en ReactJS-webbapplikation och har fastnat i ett problem. Problemet är att jag har en array med URL:er till viss JSON-data och jag vill hämta all denna JSON-data från servern med hjälp av useSWR-hooken (så att den hämtade datan också cachas). Nu är problemet att enligt reglerna kan vi inte använda hooks inuti någon loop eller block.

Exempel -

  1. Vad jag har - ["http://someapi/a.json", "http://someapi/b.json", "http://someapi/c.json"]
  2. Vad jag vill göra - iterera över denna array och anropa dessa URL:er med useSWR-hooken, så att jag har en lista över [ JSON ObjektA, JSON ObjektB, JSON ObjektC ]
  3. Varför jag försöker använda "useSWR" är för att jag vet att dessa data inte kommer att ändras på 24 timmar och jag vill cachea dessa värden.

Kan någon föreslå hur jag kan iterera över listan av URL:er och göra ett anrop till servern med hjälp av useSWR-hooken? Och finns det någon annan optimerad metod för att lösa detta problem? All hjälp eller vägledning uppskattas verkligen.

Svar #1

Ett av alternativen jag tänker på är att skapa en React FetchComponent med url-prop och använda useSWR-hooken inuti. Rendera komponenter som antal urls. Något i stil med detta:

["http://someapi/a.json", "http://someapi/b.json", "http://someapi/c.json"].map(url=><FetchComponent url={url}/>)

Svar #2

Du kan skriva en anpassad hämtare som hanterar en array av URL:er och svarar med en array av svar:

const multiFetcher = (urls) => Promise.all(
  urls.map(url => fetch(url).then(r => r.json())
)

function MyComponent() {
  const { data } = useSWR(["http://someapi/a.json",
                           "http://someapi/b.json",
                           "http://someapi/c.json"], multiFetcher)

  return <ul>{data.map(d => <li><pre>{JSON.stringify(d)}</pre></li>)}</ul>
}

Relaterade artiklar