Question

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

定义行动：

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 
           })
       })
   } 
}

组件/ 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>
        )
    }
}

我一直得到的是：

我已经尝试了几乎所有来自stackoverflow帖子的选项，提到Object.getOwnPropertyNames返回undefined或null错误，但仍然没有运气。任何指针都非常有帮助！

高级欢呼！

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异步调用throws无法在Function.getOwnPropertyNames中将undefined或null转换为对象

2 个答案: