Estoy creando una aplicación del sistema solar y quiero tener toda la información de mi planeta en un archivo JSON para facilitar el acceso. El archivo JSON tiene el siguiente formato
Planet-info.json, en la carpeta public de mi aplicación React
"planets": [ { "Name": "Mercury", "Description": "The smallest planet in our solar system and closest to the Sun—is only slightly larger than Earth's Moon. Mercury is the fastest planet, zipping around the Sun every 88 Earth days.", "Moons": 0, "Habititable": "false" }, { "Name": "Venus", "Description": "is hot", "Moons": 0, "Habititable": "false" } ] Y estoy obteniendo los datos con el gancho useEffect
const [planetData, setPlanetData] = useState(); useEffect(() => { const fetchData = () => { fetch("/planet-info.json").then((result) => { setPlanetData(result); }); }; fetchData(); console.log(`planet data is ${planetData}`); }, []); Sin embargo, cuando se ejecuta este código y se ejecuta la instrucción console.log, devuelve la línea de planet data is No dice undefined , o incluso [Object object] simplemente está en blanco y no puedo solucionar el problema desde allí.
fetchData se ejecuta de forma asíncrona. Entonces lo que está pasando es
fetchData comienzaconsole.log (antes de que el archivo json tenga la oportunidad de cargarse)fetch , setPlanetData(result) . Si desea ver el valor impreso, esto debería hacerlo: useEffect(() => { fetch("/planet-info.json").then(result => { const json = result.json(); console.log(json); setPlanetData(json); }); });