Question

React TypeError 未定义

2019-03-08

3370

javascript reactjs api typeerror

我是 React 世界的新手。我正在创建天气应用，并使用 openweathermap api 获取数据（使用 dark sky 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

在 componentDidMount 中从服务器获取数据之前，React 将尝试渲染当前处于以下状态的内容：

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

其中 weatherData 此时为空对象。

您可以通过在状态下设置 data 来修复此问题：

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

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;