来自 API 的 ReactJS 数据

Question

Hello guys when i'm running this code in ReactJS

const callApi = async () => {
    const response = await axios.get('http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=mykey');
    setWeather(response)
  }

i can get to console.log(weather.data) but when i try to get console.log(weather.data.main) i get this error TypeError: Cannot read property 'main' of undefined i tried to parse that data to JSON but that didnt work either.

Here you can see that this object has this property:

{
    "coord": {
        "lon": -0.13,
        "lat": 51.51
    },
    "weather": [
        {
            "id": 804,
            "main": "Clouds",
            "description": "overcast clouds",
            "icon": "04n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 12.43,
        "feels_like": 7.81,
        "temp_min": 11.67,
        "temp_max": 13,
        "pressure": 1010,
        "humidity": 62
    },
    .....other items
}

Thank you for all answers.

Answer 1

Sometimes during the first render data isn't defined yet so use:

console.log(weather.data?.main)

and works like a if(data)