Блог

Я хочу извлечь координаты широты / длины из состояния местоположения, однако я получаю сообщение об ошибке, в котором говорится, что невозможно прочитать свойства undefined [0] .

Я вызвал функцию получения местоположения в функции погоды, есть ли что-то, чего мне не хватает?

 import Card from "../Card/Card";
import { useState } from "react";

const WeatherCard = () => {
  const [location, setLocation] = useState();

  // function gets users location, and sets it to location state
  const getLocation = () => {
    // uses navigator to get location
    navigator.geolocation.getCurrentPosition((location) => {
    // sets lat/long position to state[array]
    setLocation([location.coords.latitude, location.coords.longitude]);
    });
  };

  // function to get weather data from api
  const getWeather = () => {
    // calls getLocation function
    getLocation();
    // fetches weather data from api
    fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${location[0]}amp;lon=${location[1]}amp;exclude={part}amp;appid=${process.env.REACT_APP_API_KEY}`)
    // takes data and parses it to json
    .then(res => res.json())
    // sets weather data to console
    .then(data => console.log(data))
  }

  // renders the weather card
  return (
    <Card>
      <div>{location}</div>
      <button onClick={getWeather}>Click</button>
    </Card>
  );
};

export default WeatherCard;

 

API геолокации является асинхронным, поэтому исправьте функцию getLocation на async:

 const getLocation = async () => {
    // uses navigator to get location
    await navigator.geolocation.getCurrentPosition((location) => {
    // sets lat/long position to state[array]
    setLocation([location.coords.latitude, location.coords.longitude]);
    });
  };