Tengo tres funciones: [getLocation, getWeather, displayWeather]

Me gustaría que displayWeather use asíncrono y llame a las otras funciones, pero recibo un error de getWeather(), que indica que algo salió mal con el rechazo().

Entiendo que hay un problema en alguna parte al obtener posiciones largas y largas, pero no puedo entender de dónde vienen mis problemas.

Definitivamente nuevo en JS Promises, y me encantaría algo de apoyo.

Muchas gracias

 import Card from "../Card/Card"; import { useState } from "react"; const WeatherCard = () => { const [location, setLocation] = useState([]); // array default const getLocation = () => { return new Promise((resolve, reject) => { // if location is enabled in browser if (navigator.geolocation) { // get [lat, lon] coordinates, passes to setLocation() resolve( navigator.geolocation.getCurrentPosition((position) => { // set location state to array [lat, lon] setLocation([position.coords.latitude, position.coords.longitude]); }) ); // if location isn't enabled in browser } else { // error message reject(console.log("Please enable location services")); } }); }; // takes in location [lat, lon] and returns weather data const getWeather = (lat, lon) => { return new Promise((resolve, reject) => { // if location state has values if (location.length > 0) { resolve( // get data from api (api key is in .env file) fetch( `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude={part}&appid=${process.env.REACT_APP_WEATHER_API_KEY}` ) // parse data to json .then((res) => res.json()) .then((data) => { // write weather data to console console.log(data); }) ); // if location state has no values } else { // error message reject(console.log("Something went wrong getting the api")); } }); }; // displays weather data to user (async function) const displayWeather = async () => { // get location await getLocation(); //pass in location state [lat, lon] to getWeather() await getWeather(location[0], location[1]).catch((err) => console.log(err)); }; // rendered elements return ( <Card> <div>{location}</div> <button onClick={displayWeather}>Click</button> </Card> ); }; export default WeatherCard;