javascript - react 类型错误未定义

Question

我是 React 世界的新手。我正在创建天气应用程序，我正在使用 openweathermap api 获取数据(使用 dark sky api 并遇到同样的问题)。问题是我获取数据并将其保存到状态。我能够通过 JSX 和 console.log 打印该状态的全部内容，但无法获取内部的特定数据(通过 console.log 和 JSX)。问题说:类型错误:无法读取未定义的属性“城市”

这是我的代码:

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;

这是我从状态中获取和保存的结果:

Answer 1

在 componentDidMount 从服务器获取数据之前，React 将尝试渲染当前状态:

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

此时 weatherData 是一个空对象。

您可以通过在状态中设置 data 来修复它:

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