反应类型错误未定义

Question

I'm new in React world. I'm creating weather app and I'm using openweathermap api to get data (used dark sky api and had the same problem). The problem is that I get a fetch data and save it to state. I am able to print by JSX and console.log the whole content of that state but can't reach specific data inside (by console.log and JSX). The problem says: TypeError: Cannot read property 'city' of undefined

Here's my code:

import React from 'react';
import TemperaturesList from './TemperaturesList';
import axios from 'axios';

class WeatherData extends React.Component {
    state = { weatherData: {}, error: null };

    componentDidMount(){

        axios.get('https://samples.openweathermap.org/data/2.5/forecast?lat=${this.props.lat}&lon=${this.props.long}&appid=MYAPPID')
        .then(result => this.setState({
            weatherData: result
        }))
        .catch(error => this.setState({
            error: error
        }))

    }



    render(){
        return(
            <div>
            {JSON.stringify(this.state.weatherData)} // this works
            <h3>Current weather:</h3>
            {JSON.stringify(this.state.weatherData.data.city)} // this does not work
            </div>

        );
    };
};

export default WeatherData;

And here's what I get from fetch and save in state:

Answer 1

Before the data is being fetched from the server in componentDidMount React will try to render what is currently in the state:

state = { weatherData: {}, error: null };
....
{JSON.stringify(this.state.weatherData.data.city)}

where weatherData is an empty object at this point.

You could fix it by setting data in the state:

state = { weatherData: { data: {} }, error: null };

Answer 2

The api call will be triggered after render and hence this.state.weatherData.data will be undefined on initial render. Also it is better to store the axios response.data in state rather than the whole response itself. This should work

import React from 'react';
import TemperaturesList from './TemperaturesList';
import axios from 'axios';

class WeatherData extends React.Component {
  state = { weatherData: {city: ''}, error: null };

  componentDidMount(){
    axios.get('https://samples.openweathermap.org/data/2.5/forecast? 
     lat=${this.props.lat}&lon=${this.props.long}&appid=MYAPPID')
    .then(result => this.setState({
        weatherData: result.data
    }))
    .catch(error => this.setState({
        error: error
    }))

}

render(){
    return(
        <div>
        {JSON.stringify(this.state.weatherData)}
        <h3>Current weather:</h3>
        {JSON.stringify(this.state.weatherData.data.city)}
        </div>

    );
 };
 };

 export default WeatherData;