React 异步调用抛出 Cannot convert undefined or null to object at Function.getOwnPropertyNames

Question

我正在尝试调用天气 api 来异步获取数据。我正在使用与 redux 的反应。我知道对象的状态最初是未定义的，在 API return 成功后，将再次填充。但是当我试图检查对象是否未定义或为空时，它总是抛出错误。

定义动作：

import axios from 'axios';

export function fetchWeather(location){
   return function(dispatch){
       axios.get('http://api.wunderground.com/api/2f986c7548abb959/conditions/q/'+ location.state + "/" + location.city + ".json")
       .then((response) => {
           dispatch({
               type: "FETCH_WEATHER_FULLFILLED", 
               weather: response.data 
           })
       }).catch( (err) => {
           dispatch({
               type: "FETCH_WEATHER_REJECTED", 
               payload: err 
           })
       })
   } 
}

component/App.js,

import React from 'react';

import Weather from './Weather';
import LocationForm from './LocationForm';

import { fetchWeather } from '../actions/weatherActions';

import {connect} from 'react-redux';

@connect( (store) => {
    return {
        weather: store.weather.weather   
    };          
})

export default class App extends React.Component {   
    componentWillMount(){
        this.props.dispatch( fetchWeather({
            city: 'Boston',
            state: 'MA'
        }));  
    }
    render(){

        const {weather} = this.props;

        return (
           <div> 
               <h1> Weather Check </h1>
                  <Weather weather={weather} />
                 <LocationForm />
            </div>
        )
    }
}

并在Weather.js（在问题区域评论）

import React from 'react';

export default class Weather extends React.Component {
    render(){ 

        //Problem here
        if(Object.getOwnPropertyNames(this.props.weather).length === 0){
            return(<div></div>)
        }

        return (
            <div> 
               <h3> { this.props.weather.current_observation.display_location.full} </h3>
            </div>
        )
    }
}

我总是收到的是：

我已经尝试了 Whosebug 帖子中提到 Object.getOwnPropertyNames returning 未定义或空错误的几乎所有选项，但仍然没有成功。任何指点都会有很大帮助！

先进的干杯！

Answer 1

如果您在@azium 的建议后仍想使用 Object.getOwnPropertyNames，您可以执行以下操作以防止错误并确保始终传递有效对象：

 @connect( (store) => {
  return {
     weather: store.weather.weather || {}
  };          
})

Answer 2

为了完成答案，由于减速器中的拼写错误，我没有在屏幕上获取值，

case "FETCH_WEATHER_FULLFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                weather: action.payload
            }
        }

动作是

.then((response) => {           
           dispatch({
               type: "FETCH_WEATHER_FULLFILLED", 
               weather: response.data 
           })

这是一个打字错误，实际上，我应该输入的是 action.weather 而不是 action.payload

case "FETCH_WEATHER_FULLFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                weather: action.weather
            }
        }

React 异步调用抛出 Cannot convert undefined or null to object at Function.getOwnPropertyNames

React asynchronous call throws Cannot convert undefined or null to object at Function.getOwnPropertyNames

javascript

undefined

reactjs