1

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.

5
  • ¿Y cuál es el código de React? ¿Cuál es el error?
    – Jacobo
    Commented el 3 ene. 2022 a las 4:06
  • 3
    fetch regresa una promesa, se puede crear un array de promesas, luego resolver el cambio de estado con promise.All
    – g.4
    Commented el 3 ene. 2022 a las 6:15
  • La opción de promise.All puede ser adecuada, de todos modos te invito a hacer el recorrido de bienvenida del sitio, y ver el apartado "Como preguntar?", le falta mucha información a tu pregunta para que sea posible ayudarte con algo seguro. Commented el 3 ene. 2022 a las 13:47
  • Gracias por las respuestas, ahi edite la pregunta con el codigo que intente utilizar y el error que me genera.
    – pilki
    Commented el 3 ene. 2022 a las 18:42
  • Una de las reglas de los hooks es que no puedes envolver un hook en un ciclo. Commented el 3 ene. 2022 a las 20:45

2 respuestas 2

1

Se puede crear un arreglo de promesas, fetch regresa una promesa:

let promiseLoop = [];
for (let i = 0; i < 3; i++){
     //la paginacion comienza en i+1
     promiseLoop[i] = fetch(`https://rickandmortyapi.com/api/episode?page=${i+1}`)
     .then(res => res.json());
}

Después, promise.all permite manipular arregos de promesas; dentro de la función de continuación then se puede manipular la resolución de cada una de ellas:

Promise.all(promiseLoop).then(values => {
    //values es un array de resultados de promesas en promiseLoop
    //nivelando la estructura con flatMap
    //la propiedad que nos interesa es results
    const episodes = values.flatMap(value => [...value.results])
    setState(episodes);
});

Se hace uso de flatMap y spread operator para crear la nueva estructura de episodios, values es un arreglo de resoluciones, se accede a cada uno de sus elementos mediante la callback de flatMap y se pide la propiedad results, que es donde vienen los datos que se necesitan:

const episodes = values.flatMap(value => [...value.results])

Finalmente, se cambia el estado con la función setState de useState:

setState(episodes);

Demo:

function App(){
  const [state, setState] = React.useState([]);
  
  React.useEffect(()=>{
    let promiseLoop = [];
    
    for (let i = 0; i < 3; i++){
      //la paginacion comienza en i+1
      promiseLoop[i] = fetch(`https://rickandmortyapi.com/api/episode?page=${i+1}`)
      .then(res => res.json());
    }
 
    Promise.all(promiseLoop).then(values => {
       const episodes = values.flatMap(value => [...value.results]);
       setState(episodes);
    });
    
  },[]);

  console.log("Total episodes:",state.length);

  return <p>Estudiando promise.all en reactJS</p>
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>


Notas de campo

  • Hace falta validar cuando la promesa no se resuelve, encontrarás ejemplos en la documentación de Mozilla.

Enlaces:

1

El problema que planteas a pesar de tener la misma idea para la solución, me parece que su contraparte en React es más complicada. Por qué?

  • Porque no puedes hacer uso de async en la función de useEffect
  • Porque debes buscar una manera de almacenar ese valor que no dependa de tu componente o del estado del mismo.

Acá puedes ver cómo funciona mi solución (posiblemente sugieran otras alternativas): https://codesandbox.io/s/competent-babycat-zc2o2?file=/src/App.js

Dicho esto, te explico la solución a la que llegue: Mi useEffect luce muy similar al tuyo, pero tomando en cuenta lo de la ejecución asincrona:

  const [episodes, setEpisodes] = React.useState([]);

  React.useEffect(() => {
    (async () => {
      const tmpEpisodes = await getAllEpisodes();
      setEpisodes(tmpEpisodes);
    })();
  }, []);

Ahora, tuve que definir 2 funciones auxiliares, getAllEpisodes y getEpisodes:

  • getAllEpisodes fue la función que utilice para mantener el estado y poder concatenar TODOS los episodios
  • getEpisodes es lo que tu habías hecho
const getEpisodes = async (page) =>
  fetch(`https://rickandmortyapi.com/api/episode?page=${page}`)
    .then((res) => res.json())
    .then((data) => data.results);

const getAllEpisodes = async () => {
  return new Promise((resolve, reject) => {
    let episodesPromises = [];
    for (let i = 1; i <= 3; i++) {
      episodesPromises.push(getEpisodes(i));
    }

    Promise.all(episodesPromises).then((values) => {
      const episodes = values
        .flatMap(value => [...value])
        .sort((a, b) => a.id > b.id)
      resolve(episodes);
    });
  });
};

Ahora, viendo el código:

  • getEpisodes es una promesa que se encarga de obtener la información y devolverla como un arreglo de JS (porque hace el res.json y solo devuelve el data.results

Mientras que, getAllEpisodes, es una función asincrona que se encarga de:

  • Primero, ejecutar TODAs las llamadas al API
  • Espera todas las respuestas
  • Una vez teniendo todas las respuestas, las junta en un solo arreglo y luego las ordena
  • Finalmente devuelve este nuevo arreglo ordenado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.