react useEffect hooks with axios cannot read property of undefined

Question

This is based on exercise 2.14 of this course https://fullstackopen.com/en/part2/getting_data_from_server.

The user can select a country, then the weather information for that country's capital will be dislpayed. My code gives me error Cannot read property 'temperature' of undefined

const Weather = ({ city }) => {
const [weatherDetails, setWeatherDetails] = useState([])

useEffect(() => {
    axios.get('http://api.weatherstack.com/current', {
        params: {
            access_key: process.env.REACT_APP_WEATHER_KEY,
            query: city
        }
    }).then(
        (response) => {
            setWeatherDetails(response.data)
        }
    )
}, [city])
console.log('weather', weatherDetails);

return (
    <div>
        <h3>Weather in {city} </h3>
        {weatherDetails.current.temperature}
    </div>
)}

Basically, the line

{weatherDetails.current.temperature}

makes my code crash. When I do remove that line, I am able to see the response thanks to the console.log, but there are two consecutive logs

weather []
weather {request: {…}, location: {…}, current: {…}}

I figured that my code happens in between these two, and it tries to access the data before it has even arrived, but I don't know what to do to fix this.

Also, I don't know what the argument [city] of useEffect() does, so it'd be great if someone can explain to me what it does.

Edit: Solved! Set weatherDetail's initial state to null and did some conditional rendering

if (weatherDetails) {
    return (
        <div>
            <h3>Weather in {capital}</h3>
            {weatherDetails.current.temperature} Celsius
        </div>
    )
} else {
    return (
        <div>
            Loading Weather...
        </div>
    )
}

Drew Reese · Accepted Answer · 2020-06-05 03:39:50Z

weatherDetails is an empty array, initially, so there is no current property to read from.

Use some conditional rendering. Use initial null state and then check that it is truthy to access the rest of the object when it is updated.

const Weather = ({ city }) => {
const [weatherDetails, setWeatherDetails] = useState(null) // <-- use null initial state

useEffect(() => {
    axios.get('http://api.weatherstack.com/current', {
        params: {
            access_key: process.env.REACT_APP_WEATHER_KEY,
            query: city
        }
    }).then(
        (response) => {
            setWeatherDetails(response.data)
        }
    )
}, [city])
console.log('weather', weatherDetails);

return (
    <div>
        <h3>Weather in {capital} </h3>
        {weatherDetails && weatherDetails.current.temperature} // check that weatherDetails exists before accessing properties.
    </div>
)}

What does the argument [city] of useEffect do?

This is the hook's dependency array. Hooks run on each render cycle, and if any values in the dependency array have updated it triggers the hook's callback, in this case, the effect to get weather data when the city prop updates.

useEffect

By default, effects run after every completed render, but you can choose to fire them only when certain values have changed.

Collectives™ on Stack Overflow

react useEffect hooks with axios cannot read property of undefined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related