Estoy tratando de hacer algunas búsquedas básicas con ganchos, pero sigo sin definirme como respuesta.

//Gancho

export const useFetch = (url, initialValue) ={amp}gt; { const [Data, setData] = useState(initialValue); useEffect(() ={amp}gt; { const fetchData = async () ={amp}gt; { const result = await axios(url); setData(result); }; fetchData(); }, []); console.log(Data,'data') // undefined return { Data, setData } 

}

// componente

  export default function BeerTable() { const classes = useStyles(); const data = useFetch( "https://api.punkapi.com/v2/beers/" ); const { Beers, setBeers }= useState(data) console.log(Beers, 'beers')//undefined return ( //some table ) } 

La respuesta que obtengo cuando llamo al punto final en el navegador:

  [ { "id": 192, "name": "Punk IPA 2007 - 2010", "tagline": "Post Modern Classic. Spiky. Tropical. Hoppy.", "first_brewed": "04/2007", "abv": 6.0, "ibu": 60.0, "target_fg": 1010.0, "target_og": 1056.0, "ebc": 17.0, "srm": 8.5, "ph": 4.4, "attenuation_level": 82.14, "volume": { "value": 20, "unit": "liters" }, } .....] 

qué está mal ???

fetchData está actualizando Data en una respuesta asincrónica. Pero está devolviendo Data antes de que haya completado la recuperación.

Mientras tanto, en su componente, está asignando data solo una vez. Pasará por la lógica useFetch y useFetch lo que devuelve instantáneamente, lo cual undefined. está undefined.

Para obtener los cambios de useFetch , deberá tener un useEffect en su componente que esté useEffect a los cambios de Data .

 // component export default function BeerTable() { const [Beers, setBeers] = useState(); const data = useFetch("htttps://api.punkapi.com/v2/beers/"); useEffect(() ={amp}gt; { setBeers(data.Data); console.log('beers got updated: '   Beers'); }, [data.Data]); } 

Está utilizando la desestructuración de objetos con una matriz, por lo que no se devuelve ningún dato.

No estoy seguro de lo que está tratando de hacer con los datos, pero es posible que desee recorrerlo de esta manera:

 const beerArray = useState(data) for (var i=0; i{amp}lt;beerArray.length, i  ){ // Do stuff with each beer object here }