Question

我最近开始使用React.js并且一直在尝试构建一个简单的天气应用程序。 GET请求没有问题，因为控制台正在打印从OpenWeatherMap API收到的JSON字符串，但似乎存在将JSON分配给局部变量然后访问其属性的问题。

getInitialState : function(){
        return (
            {weatherdata: null }
            );
    },

componentWillMount : function(){
    HttpService.get()
    .then(function(jsondata){
        console.log(jsondata);
        this.setState({weatherdata : jsondata});       
        }.bind(this));                                 
},

控制台给了我2个错误，并且反应开发工具拒绝加载：未捕获的TypeError：无法读取null的属性'main'

未捕获（承诺）TypeError：无法读取null（...）的属性'_currentElement'

第一个指向我的行

React.createElement（今天，{temp：this.state.weatherdata.main.temp，

这是渲染函数内部返回的片段

return(
    <div>
        <Today  temp={this.state.weatherdata.main.temp}
                windSpeed={this.state.weatherdata.wind.speed}
                windAngle={this.state.weatherdata.wind.deg}
                icon={this.state.weatherdata.weather[0].icon}
                iconID={this.state.weatherdata.weather[0].id}
                iconDesc={this.state.weatherdata.weather[0].description} />
     </div>
);

现在，如果我直接将所有数据粘贴到weatherdata对象中，它似乎工作正常。

尝试过JSON.parse（），但这似乎无法解决问题。任何帮助将不胜感激。

Answer 1

您正在请求某些异步进程，但希望在数据进入之前呈现它。

尝试返回null，直到数据进入

if(!this.state.weatherdata){
    return null;
}
return(
    <div>
        <Today  temp={this.state.weatherdata.main.temp}
                windSpeed={this.state.weatherdata.wind.speed}
                windAngle={this.state.weatherdata.wind.deg}
                icon={this.state.weatherdata.weather[0].icon}
                iconID={this.state.weatherdata.weather[0].id}
                iconDesc={this.state.weatherdata.weather[0].description} />
     </div>
);

话虽如此，我建议你使用像lodash这样的库，它有一个get方法。它将通过删除javascript错误极大地提高代码的稳定性。 get方法接受一个变量并在其上搜索路径。

EX：

var test = {john: ['billy', 'bob']};
console.log(_.get(test, 'john[1]'); // prints 'bob'
console.log(_.get(test, 'john[2]'); // prints 'undefined'
console.log(_.get(test, 'john[2].something.somethingElse'); // prints 'undefined'

如果您使用lodash，这就是它的样子。

var weatherData = this.state.weatherdata;
return(
    <div>
        <Today  temp={_.get(weatherData, 'main.temp')}
                windSpeed={_.get(weatherData, 'wind.speed')}
                windAngle={_.get(weatherData, 'wind.deg')}
                icon={_.get(weatherData, 'weather[0].icon')}
                iconID={_.get(weatherData, 'weather[0].id')}
                iconDesc={_.get(weatherData, 'weather[0].description')} />
     </div>
);

将JSON数据分配给变量并通过React

1 个答案: