2

tengo el siguiente código

Este seria dónde hago la petición

export default function getCharacters() {
  const apiUrl = `https://gateway.marvel.com/v1/public/characters?events=29&limit=60&ts=9&apikey=${PUBLIC_KEY}&hash=${HASH}`;

  return fetch(apiUrl)
    .then((res) => res.json())
    .then((response) => {
      const { results } = response.data;
      const characters = results.map((character) => {
        const { id, name } = character;
        const { path, extension } = character.thumbnail;
        return { id, name, path, extension };
      });
      return characters;
    });
}

```

Y en este es donde lo quiero recoger los datos de la petición

```

const Characters = () => {

  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    getCharacters() 
      .then(response => {
        setCharacters(response)
      })
  }, []);

 const character = characters.map( p=> <Character  key = {p.id} name = {p.name} />)


  return <main className="Characters">
    {character}
  </main>;
};

```

El problema es que la peticion me la hace dos veces, no entiendo por qué, los resultados  solo salen 1 vez correctamente, no sé si es por que los machaca o no lo sé. Pero el problema es la doble petición
4
  • Si pudieras agregar una imagen de tu consola, lo que yo espero es ver un array vacio (characters initState) y posteriormente characters ya con los datos devueltos de fetch, ese es el comportamiento normal del componente (ciclo de vida de un componente ReactJs) saludos
    – g.4
    el 9 abr. 2021 a las 23:30
  • @g.4 Donde deberia poner el console log en el effect? el 10 abr. 2021 a las 8:01
  • @FerLam, ponLo antes del return, Es decir fuera del effect en el scope de Characters, ¿Dónde dices que ves la doble petición? Saludos
    – g.4
    el 10 abr. 2021 a las 15:35
  • a mi me parece que es correcto la manera en que está implementado, no veo razón por la que se haga la petición dos veces. ¿Dónde vez que se pide dos veces? Si es desde el inspector del navegador es posible que estés viendo una petición de OPTIONS que funciona como verificador que puedes hacer la petición que quieres, y luego el GET que necesitas.
    – Japsz
    el 14 abr. 2021 a las 19:26

1 respuesta 1

1

Me encontré con un problema parecido, tengo un useEffect() con un array vacío como dependencia, para que se ejecute solo una vez al cargar el app, pero siempre se ejecuta dos veces. El origen del problema estaba en que en index.js la app se encontraba entre <React.StrictMode> tags. Usé create-react-app al inicio, y por defecto utiliza Strict Mode.

Strict Mode hace que todos los componentes se renderizen dos veces para ayudar a detectar problemas.

Encontré la solución aquí

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.