Question

我正在学习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
}

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

我可以毫无问题地调用结果和第一层，但调用任何嵌套属性都会在错误中响应，说它无法读取未定义的属性。

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

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;

也许我不应该使用州？我正在考虑创建一个解决方案，用户可以在以后更改城市，这就是我使用状态的原因。 如果有经验的人可以通过良好的练习解释并重构我的例子，我会非常感激，这样我就可以学会正确行事。

Answer 1

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

1）在首次渲染之前，您发送的请求将返回数据，状态为{currentWeather: '', apiCall: ''}

2）请求是异步的，所以 .then(function(data) { this.setState({apiCall: data}); this.setState({currentWeather: data.weather[0]}); }.bind(this)) 几秒钟后将调用此代码

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

this.state.apiCall.main.humidity

但是，现在状态仍然是{currentWeather: '', apiCall: ''}所以我们会有错误

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

weatherNow = {Res＆amp;＆amp; Res.main＆amp;＆amp; Res.main.humidity}

我还建议你阅读react styleguids，现在你的组件看起来很丑陋）

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

1 个答案: