Soy nuevo en reaccionar, traté de crear una aplicación meteorológica simple, hice un fondo de video de pantalla completa y quiero que cambie el src dinámicamente según la respuesta que recibo de la API,
aquí está mi código:
import { useEffect, useState } from "react"; import { Background } from "./components/Background"; const api = { key: "", base: "https://api.openweathermap.org/data/2.5/", }; function App() { const [query, setQuery] = useState(""); const [weather, setWeather] = useState({}); const [backgroundVideo, setBackgroundVideo] = useState(""); const search = (e) => { if (e.key === "Enter") { fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`) .then((res) => res.json()) .then((result) => { setWeather(result); setBackgroundVideo(`${result.weather[0].description}`);//clear sky setQuery(""); }); } }; return ( <div className="bg"> {/**Video Background */} {typeof weather.main !== "undefinde" && typeof weather.sys !== "undefined" ? ( <video autoPlay loop muted className="vid"> <source src={`/videos/${backgroundVideo}.mp4`} // /videos/clear sky.mp4 type="video/mp4" /> </video> ) : ( "" )} }Estoy obteniendo todos los datos que quiero pero no funciona, cuando actualizo la página no hay video, cuando busco la primera ciudad funciona (Londres -> nubes dispersas), pero si busqué otra ciudad (Sanaa -> pocas nubes) permanece igual que antes, aunque cuando veo la fuente de video de las herramientas de desarrollo, ¡se actualizó!