Obtuve algunos datos de una API de terceros y luego los registré en la consola. Sin embargo, se muestra como nulo en la consola (en realidad, es una cadena vacía). Algo que noté fue que se solicitó varias veces. ¿Cómo puedo almacenar la cadena en una variable? ¿Es un problema con la forma en que obtengo los datos o es cómo los almaceno?

 import { ThemeProvider, createTheme } from "@mui/material/styles"; import React from "react"; import { CssBaseline } from "@mui/material"; import { useState } from "react"; import { Alert } from "@mui/material"; import { useEffect } from "react"; // Dark theme function App() { const [ready, setReady] = useState(false); const [requestUrl, setRequestUrl] = useState(""); const [zuhrtime, setZuhrtime] = useState(""); useEffect(() => { fetchData(); }, [ready]); const darkTheme = createTheme({ palette: { mode: "dark", }, }); // api variables const api1 = "https://api.aladhan.com/v1/timings/"; const api2 = "?latitude="; const api3 = "&longitude="; // Get location const [showAlert, setShowAlert] = useState(false); const getMyLocation = () => { const success = (position) => { //console.log(position); const latitude = position.coords.latitude; const longitude = position.coords.longitude; const timestamp = position.timestamp; setRequestUrl(api1 + timestamp + api2 + latitude + api3 + longitude); setReady(true); //console.log(requestUrl); //console.log(timestamp); setShowAlert(true); setReady(true); }; const error = () => { console.log("error"); setShowAlert(false); }; navigator.geolocation.getCurrentPosition(success, error); }; // Get request from api const fetchData = async () => { const response = await fetch(requestUrl); let adata = await response.json(); console.log(adata); setZuhrtime(adata.status); // what I want to display setZuhrtime(adata.data.timings.Dhuhr); // also what I want to display console.log(zuhrtime); }; return ( <ThemeProvider theme={darkTheme}> <CssBaseline /> <h2> {showAlert ? ( <Alert variant="filled" severity="success"> Location Accessed </Alert> ) : ( <Alert variant="filled" severity="error"> Unable to get location. Enable location to use this </Alert> )} </h2> {getMyLocation()} </ThemeProvider> ); } export default App;