為什么我在這里獲取數據時出錯？

Question

我有這個用於在 state 中保存獲取的數據：

import React, {useState, useEffect, createContext} from 'react';


import { getLocation } from '../api';

export const LocationContext = createContext();

const LocatonContextProvider = (props) => {

const [location, setLocation] = useState({})

useEffect(() => {
    const fetchAPI = async () => {
        setLocation(await getLocation());
    }

    fetchAPI();
}, [])


return (
    <LocationContext.Provider value={location}>
        {props.children}
    </LocationContext.Provider>
);
};

export default LocatonContextProvider;

這用於保存天氣數據 import React, {useState, useEffect, createContext, useContext} from 'react';

 //api
 import { getWeather } from '../services/api';

//Context
import { LocationContext } from '../contexts/LocationContextProvider';

export const WeatherContext = createContext()

const WeatherContextProvider = ({children}) => {

const location = useContext(LocationContext);
const lat = location.lat;
const lon = location.lon;

const [weather, setWeather] = useState({});

useEffect(() => {
    const fetchAPI = async () => {
        setWeather(await getWeather(lat,lon));
    }
    fetchAPI();
}, [lat, lon])

return (
    <WeatherContext.Provider value={weather}>
        {children}
    </WeatherContext.Provider>
);
};

export default WeatherContextProvider;

這是 axios 請求：從“axios”導入 axios；

const getLocation = async () => {

const LOCATION_URL = 'http://ip-api.com/json/?fields=country,city,lat,lon,timezone';

const response = await axios.get(LOCATION_URL);
return response.data;
}


const getWeather = async (lat, lon) => {

const WEATHER_URL = `https://api.openweathermap.org/data/2.5/weather? 
lat=${lat}&lon=${lon}&appid=bac9f71264248603c36f011a991ec5f6`;

const response = await axios.get(WEATHER_URL)
return response.data;
}


export {getLocation, getWeather};

當我刷新頁面時，我得到一個 400 錯誤，然后我得到數據，我不知道為什么會發生錯誤

Answer 1

useEffect(() => {
    const fetchAPI = async () => {
        setWeather(await getWeather(lat,lon));
    }
    
    if (lat && lon) {
      fetchAPI();
    }
}, [lat, lon])