javascript - 将 JSON 数据分配给变量并通过 React 中的状态访问它时出错

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 个错误，并且 React 开发工具拒绝加载:未捕获的类型错误:无法读取 null 的属性“main”

未捕获( promise 中)类型错误:无法读取 null(...) 的属性“_currentElement”

第一个将我指向该行

React.createElement(Today, { 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>
);

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

已尝试 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 方法接受一个变量并搜索其上的路径。

例如:

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