Estoy tratando de establecer el fondo de mi aplicación React en el APOD (Imagen astronómica del día) de la NASA. Aquí está mi código para eso:
import './App.css'; import React, { useState, useEffect } from "react"; const apiKey = process.env.REACT_APP_NASA_KEY; function App() { const [bg, setBg] = useState(null); async function fetchPhoto() { const dat = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`); const data = await dat.json(); setBg(data); } useEffect(() => { fetchPhoto().then(() => { document.body.style.backgroundImage = `url('${bg.url}')` }) }, []) return null; } Sin embargo, en este código no espera a que se establezca el estado then aparece el error:
App.js:22 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'url')at App.js:22:1¿Qué estoy haciendo mal? ¡Gracias!
Una forma más sencilla de lograr lo que desea es hacer lo siguiente, de esta manera no tiene que administrar tareas asincrónicas como lo está haciendo:
import './App.css'; import React, { useState, useEffect } from "react"; const apiKey = process.env.REACT_APP_NASA_KEY; function App() { const [bg, setBg] = useState(null); async function fetchPhoto() { const dat = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`); const data = await dat.json(); setBg(data); } useEffect(() => { fetchPhoto() }, []) useEffect(() => { if(bg){ document.body.style.backgroundImage = `url('${bg.url}')`; } }, [bg]) return null; } Su código no funciona porque justo después de ejecutar y resolver fetchPhoto() , React aún no volvió a procesar los componentes (actualizó el estado), por lo tanto, bg aún es null .
¿Necesitas el estado para algo más? Si no, podrías evitarlo:
function App() { useEffect(() => { const fetchPhoto = async () => { const dat = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`); const data = await dat.json(); if (data) { document.body.style.backgroundImage = `url('${data.url}')`; } } fetchPhoto(); }, []) return null; }