Question

我已经设置了名为data的状态，并在getInitialState（）中将其声明为空数组。此外，我在componentDidMount（）中进行了ajax调用并获得了一个JSON。

如何使用setState方法将多个JSON请求推送到名为data的数组？

var Forecast = React.createClass({

    getInitialState() {
        return {
            data: [] 
        } 
    }, 

    componentDidMount: function() {
        this.serverRequest = $.get('http://api.openweathermap.org/data/2.5/weather?zip=3000,au&appid=005fa98ae858a29acf836ecdefac0411', function(result) {
            var tempData = result;
            this.setState({
                // Is there any way to push multiple JSON into an array? 
                // below line of code is my attempt
                data: tempData 
            });
        }.bind(this));
    }

     ...
}

Answer 1

我非常确定jQuery不会为您自动转换为数组：

this.serverRequest = $.get('http://api.openweathermap.org/data/2.5/weather?zip=3000,au&appid=005fa98ae858a29acf836ecdefac0411', function(result) {
    var tempData = JSON.parse(result);
    this.setState({
        data: tempData // reset the data
    });
}.bind(this));

那种东西会起作用

编辑：您没有遵循API的协议。我手动将其键入浏览器，得到了这个结果：

{"coord":{"lon":144.96,"lat":-37.81},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":283.48,"pressure":1032,"humidity":76,"temp_min":282.15,"temp_max":285.15},"visibility":10000,"wind":{"speed":4.6,"deg":360},"clouds":{"all":75},"dt":1497828600,"sys":{"type":1,"id":8201,"message":0.0048,"country":"AU","sunrise":1497821707,"sunset":1497856068},"id":0,"name":"Melbourne","cod":200}

这显然不是一个数组（因此你不能说data[0]）

如果要访问JSON对象，请执行以下操作：

console.log(data["coord"]); // this will return {"lon":144.96,"lat":-37.81}

编辑：如果要存储请求列表，则需要执行以下操作：

this.setState({
    data: this.state.data.concat(tempData)
})

Answer 2

您似乎正在收到来自＆ap ;.openweathermap.org＆＃39;的答复。作为普通的JavaScript对象而不是数组。因此，您必须相应更改console.log方法中的初始状态和render。

getInitialState() {
    return {
        data: null
    } 
}

render() {
    console.log(this.state.data);
    //...
})

如果您想将回复放入州内的data数组中，请使用concat。

this.setState({
  data: this.state.data.concat([tempData])
});

Answer 3

那么，您想将返回的对象放入数组中，添加它吗？

这个怎么样：

...
this.setState({
  data: this.state.data.concat(tempData)
});

您也可以将其推送到state.data数组，但是还需要再做一步：

this.state.data.push(tempData);
this.setState({
  data: this.state.data
});

这意味着，修改状态，这不是一个好习惯。对于那个例子，它可能没问题，但它不是一个好习惯。

如何使用React中的setState将多个JSON请求推送到数组中

3 个答案: