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

【问题标题】：How to push multiple JSON requests into an array using setState in React如何在 React 中使用 setState 将多个 JSON 请求推送到数组中
【发布时间】：2017-06-18 23:43:46
【问题描述】：

我已经设置了名为 data 的状态，并在 getInitialState() 中将其声明为一个空数组。此外，我进行了 ajax 调用并在 componentDidMount() 中获取了 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));
    }

     ...
}

【问题讨论】：

data[0]未定义，因为数组是空的。。不知道ajax调用，你确定结果是数组吗？

标签： javascript jquery ajax reactjs

【解决方案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)
})

【讨论】：

谢谢，我已经编辑了我的代码，以便状态可以容纳一个对象。有没有办法使用 setState() 将对象推送到数组中？我想将状态保留为数组。
@Hooey 好吧，我明白你的意思了。请也将其添加到问题中
谢谢。我刚刚添加到我的问题中

【解决方案2】：

您似乎从 'api.openweathermap.org' 获得了作为纯 JavaScript 对象而不是数组的响应。所以你必须相应地改变你的初始状态和render方法中的console.log。

getInitialState() {
    return {
        data: null
    } 
}

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

如果你想把你的回复放入状态中的data数组，使用concat。

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

【讨论】：

【解决方案3】：

那么，你想把返回的对象放入数组中，添加吗？

这个呢：

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

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

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

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

【讨论】：

是的。它不是一个数组，而是一个 json 对象。我有一个数组状态。我的目标是使用上面在我的代码中定义的 setState() 将对象放入数组中。