Javascript 在React中的组件中添加多个嵌套JSON属性

我正在学习React并向OpenWeather发出API请求，结果如下：

{
    coord: {
        lon: -0.13,
        lat: 51.51
    },
    weather: [{
        id: 500,
        main: "Rain",
        description: "light rain",
        icon: "10d"
    }],
    base: "stations",
    main: {
        temp: 293.21,
        pressure: 1011,
        humidity: 86,
        temp_min: 292.45,
        temp_max: 294.26
    },
    wind: {
        speed: 1.54,
        deg: 243,
        gust: 3.08
    },
    rain: {
        3h: 0.78
    },
    clouds: {
        all: 56
    },
    dt: 1466431324,
    sys: {
        type: 3,
        id: 10115,
        message: 0.0463,
        country: "GB",
        sunrise: 1466394185,
        sunset: 1466454093
    },
    id: 2643743,
    name: "London",
    cod: 200
}

var React = require('react');
var Httprequest = require('../services/weatherservice.js');
var CurrentWeather = require('./CurrentWeather.jsx');

var WeatherApp = React.createClass({

    getInitialState: function() {
        return {currentWeather: '', apiCall: ''};
    },

    componentWillMount: function() {
        Httprequest.get('London')
        .then(function(data) {
            this.setState({apiCall: data});
            this.setState({currentWeather: data.weather[0]});
        }.bind(this));
    },

    render: function() {

        var Res = this.state.apiCall;

        return (
                <div>
                <h1>Weather App</h1>
                <CurrentWeather weatherNow={Res.main.humidity} />
                </div>
            );
    }

});

module.exports = Weather;

我在使用这个JSON数据的几个部分时遇到了问题

我可以毫无问题地调用结果和第一层，但是调用任何嵌套属性都会出现一个错误，表示它无法读取undefined的属性

我想这是因为没有定义状态，是否需要为所有嵌套层定义状态？我定义了根，如下所示：

{
    coord: {
        lon: -0.13,
        lat: 51.51
    },
    weather: [{
        id: 500,
        main: "Rain",
        description: "light rain",
        icon: "10d"
    }],
    base: "stations",
    main: {
        temp: 293.21,
        pressure: 1011,
        humidity: 86,
        temp_min: 292.45,
        temp_max: 294.26
    },
    wind: {
        speed: 1.54,
        deg: 243,
        gust: 3.08
    },
    rain: {
        3h: 0.78
    },
    clouds: {
        all: 56
    },
    dt: 1466431324,
    sys: {
        type: 3,
        id: 10115,
        message: 0.0463,
        country: "GB",
        sunrise: 1466394185,
        sunset: 1466454093
    },
    id: 2643743,
    name: "London",
    cod: 200
}

var React = require('react');
var Httprequest = require('../services/weatherservice.js');
var CurrentWeather = require('./CurrentWeather.jsx');

var WeatherApp = React.createClass({

    getInitialState: function() {
        return {currentWeather: '', apiCall: ''};
    },

    componentWillMount: function() {
        Httprequest.get('London')
        .then(function(data) {
            this.setState({apiCall: data});
            this.setState({currentWeather: data.weather[0]});
        }.bind(this));
    },

    render: function() {

        var Res = this.state.apiCall;

        return (
                <div>
                <h1>Weather App</h1>
                <CurrentWeather weatherNow={Res.main.humidity} />
                </div>
            );
    }

});

module.exports = Weather;

var React=require（'React'）；
var Httprequest=require（'../services/weatherservice.js'）；
var CurrentWeather=require（'./CurrentWeather.jsx'）；
var WeatherApp=React.createClass({
getInitialState:函数（）{
返回{currentWeather:''，apiCall:''；
},
componentWillMount:function（）{
Httprequest.get（'London'）
.then（功能（数据）{
this.setState（{apiCall:data}）；
this.setState（{currentWeather:data.weather[0]}）；
}.约束（这个）；
},
render:function（）{
var Res=this.state.apiCall；
返回(
天气应用程序
);
}
});
module.exports=天气；

---

也许我不应该使用状态？我正在考虑创建一个解决方案，用户可以在以后更改城市，这就是我使用state的原因如果有经验的人能够解释我的例子，或者用一个好的实践来重构我的例子，我会非常感激，这样我就可以学会正确地操作。

让我试着解释一下你做了什么）

1） 在第一次渲染之前，您发送将返回数据的请求，其状态为

{currentWeather:''，apiCall:''}

2） 请求是异步的，所以

.then（函数（数据）{
this.setState（{apiCall:data}）；
this.setState（{currentWeather:data.weather[0]}）；
}.bind（此））

几秒钟后将调用此代码

3） 调用了render方法，您可以在其中执行以下操作：

this.state.apiCall.main.humidity

但是，现在在状态中，您仍然有

{currentWeather:''，apiCall:''}

，所以我们将有错误

如何解决这个问题？简单，只需添加一些检查，如

weatherNow={Res&&Res.main&&Res.main.湿度}

---

我还建议您阅读react styleguids，因为现在您的组件看起来很难看）

我认为这与状态无关。在尝试访问其子项之前，只需简单地检查变量是否存在，如果不存在，请跳过或提供其他行为。您应该尝试这些todos示例，以全面了解状态管理。感谢您的回复@Kiee那么我应该检查它是否存在于我想要使用的每一个对象中吗？@KevinB很抱歉，我明白了。我看错了。那么到底什么是未定义的呢？哪里？谢谢你的解释！做Res和Res.main等使它工作。你能解释一下它为什么起作用吗？我需要为每个属性执行类似的操作吗？我认为您还没有完全理解异步模型，请首先查看呈现您只有{currentWeather:''，apiCall:''}这一点，在promise完成后，您将获得预期状态，所以，最好的方法是显示类似微调器的内容，或者在从api获取数据之前不渲染组件，或者只添加像weatherNow={Res&&Res.main&&Res.main.weathy}这样的检查，或者在所有嵌套项开始时具有更好的状态