反应TypeError未定义

Question

我是React世界的新手。我正在创建天气应用，并且正在使用openweathermap api来获取数据（使用暗天空api并存在相同的问题）。 问题是我获取了数据并将其保存到状态。我能够通过JSX和console.log打印该状态的全部内容，但是无法访问内部的特定数据（通过console.log和JSX）。 问题说： TypeError：无法读取未定义的属性“ city”

这是我的代码：

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

在从7FA43578的服务器中获取数据之前，React会尝试呈现当前状态：

componentDidMount

此时state = { weatherData: {}, error: null }; .... {JSON.stringify(this.state.weatherData.data.city)} 是一个空对象。

您可以通过将weatherData设置为以下状态来解决此问题：

data

Answer 2

api调用将在render之后触发，因此this.state.weatherData.data在初始渲染时将是未定义的。同样，最好将axios response.data存储在状态中，而不要存储整个响应本身。这应该起作用

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;