1

estaba siguiendo un tutorial de JS y me encontré con este error. Estoy tratando de hacer fetch usando una API de Pokemons, por alguna razón siempre me retorna undefined. Me gustaría aclarar que recien estoy empezando con esto así que no sé casi nada sobre el tema, si alguien me pudiera ayudar se los agradecería :)

import React, {Fragment} from 'react';

const FetchPokemon = () => {

    const mostrar = () => {
        const aux = fetchP();
        console.log(aux);
    }

    const fetchP = () => {
        fetch("https://pokeapi.co/api/v2/pokemon/")
        .then(res => {
            res.json();
        })
        .then(data => {
            return data;
        });
    }
    
    return ( 
        <Fragment>
            <button onClick={mostrar}>Boton</button>
        </Fragment>
     );
}
 
export default FetchPokemon;

3 respuestas 3

1

Cuando usas fetch junto con funciones "flecha" debes devolver ( return ) los valores. El mismo puede ser:

Explícito

fetch("https://pokeapi.co/api/v2/pokemon/")
  .then(res => {
    return res.json()
  })

Implicito:

fetch("https://pokeapi.co/api/v2/pokemon/")
  .then(res => res.json())

Otra cosa que te estaría faltando es tener algún tipo de "state" para poder almacenar el resultado del fetch. Si estas usando React Hooks, puedes escribir el componente de la siguiente manera:

const FetchPokemon = () => {

    const [pokemons, setPokemons] = React.useState(null)

    const buscar = () => {
        fetch("https://pokeapi.co/api/v2/pokemon/")
        .then(res => res.json())
        .then(data => setPokemons(data));
    }
    
    return ( 
        <React.Fragment>
            <button onClick={buscar}>Buscar Pokemons</button>
            <div>
              {JSON.stringify(pokemons)}
            </div>
        </React.Fragment>
     );
}
 
ReactDOM.render(<FetchPokemon />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Aclaración: JSON.stringify() lo utilizo para visualizar el objeto en cuestión.

1

En la función fetchp solo estas retornando en los then creo que también tienes que retornar dentro de la funcion

Adapta esta codigo seguramente te funcione

const fetchTableData = () => {
  const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })

    return fetchedData;//retornamos la contante
}

export default fetchTableData

También lo puedes implementar de esta forma en la que retornarias la promesa que luego tomaría el valor

const fetchTableData = () => {
     /* Retornamos la función directamente*/ return fetch('https://api.myjson.com/bins/15psn9')
        .then(result => result.json())
        .then(data => {
            return data;
        })
    }

    export default fetchTableData;
0

Intenta con esto:

const FetchPokemon = () => {


   const fetchP = async () => {
       let response = await fetch("https://pokeapi.co/api/v2/pokemon/")
       let data = await response.json()
       return data
    }

    const mostrar = async () => {
        const aux = await fetchP();
        console.log(aux);
    }


    return ( 
        <Fragment>
            <button onClick={mostrar}>Aumentar</button>
        </Fragment>
    );
}

Evité usar then() ya que con async/await el código es más legible.

Explicación:

Tienes que usar async/await debido a que fetch() retorna una promesa. Básicamente el código se 'pausa' esperando a fecth(), y una vez que este retorne algo se guarda en response, luego se usa .json() que transforma la respuesta en un objeto y lo guarda en data, y por último retorna data.

En mostrar también debes usar async/await ya que debes esperar a que fetchP haga todas sus cosas y retorne la data.

Una observación: fetchP debe ir antes de mostrar ya que no debes usar variables y funciones que aún no haz declarado.

1

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.