Hola les comento mi problema: Estoy recreando una aplicacion que hice entera en JS pero en React. En la aplicacion que ya hice use un bucle for para poder hacer varias llamadas a la misma api, cambiar el valor de la pagina, y almacenar todos los resultados en un mismo array. El codigo era mas o menos asi:
for (let i = 0; i <= 3; i++){
fetch(`https://rickandmortyapi.com/api/episode?page=${i}`)
.then(res => res.json())
.then(data => console.log(data))
}
Esto en JavaScript puro me funciono perfecto en su momento, pero ahora que lo estoy intentando en React me encuentro con que no se puede usar el hook useEffect en un loop.
EDIT: Agrego el codigo que intente utilizar en React y el error que me dio:
for (let i = 0; i <= 3; i++) {
useEffect(() => {
fetch(`https://rickandmortyapi.com/api/episode?page=${i}`)
.then(res => res.json())
.then(data => setEpisodes(data.results))
}, [])
}
Compiled with problems:X
ERROR
src\App.js Line 13:5: React Hook "useEffect" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
Que solución habrá para este caso? Desde ya gracias.
fetch
regresa una promesa, se puede crear un array de promesas, luego resolver el cambio de estado con promise.All