Question

我是Reactjs的新手，我正在学习使用setState方法更改状态属性。关于在reactjs中更改状态，我有几个问题。

我正在使用开放天气API构建天气网络以用于教育目的。我正在状态中保存一些属性，以便可以将它们作为道具传递给其他组件。状态如下：

export default class App extends Component {
    state ={
       error: null,
       temperature: null,
       WeatherName: null,
       isLoaded: false,
       Weather5days: [{}]
}

我具有一些常规属性（例如，温度，isLoaded）以及称为Weather5days的对象数组。在这里，我将每5天保存一次天气数据；每天的数据将进入每个数组，总长度为5。我知道javascript允许声明长度未知的数组和对象（这是您如何声明的？），所以如上所述。因此，Weather5days中的数据将如下所示：

state = {
...
Weather5days = [{date: "8.21", temperature: "20"},
                {date: "8.22", temperature: "25"},
                {date: "8.23", temperature: "24"},
                ...so on
               ]

现在，我希望添加/更改每个Weather5days数组的属性，例如Weather5days [0] .temperature ='25'等等...我从weather API中以json（也在数组中）获取此数据，并将解析后的数据分配给创建的Weather5days数组对象。

我做了一些谷歌搜索，发现我不能直接改变状态，所以在获取后我做了以下事情：

.then(json =>{
  this.setState(prevState => {
    const newItems = [...prevState.Weather5days];
    for(var i = 0; i < json.Forecasts.length; i++){
      newItems[i].date = json.Forecasts[i].Date;  
    }
    return {Weather5days: newItems};
  }

我在这里使用了循环，将来自API的所有解析数据的日期保存到Weather5days对象的每个数组中。但是，这是我得到的错误：

TypeError：未定义不是对象（正在评估'newItems [i] .date = json.Forecasts [i] .Date'）

我不太清楚为什么。也许我宣布了Weather5days对象错误，还是应该首先声明它们的长度？非常感谢你！

更新我摆弄了代码，并且在状态下尝试声明Weather5days数组，如下所示：

state = {
error: null,
temperature: null,
WeatherName: null,
isLoaded: false,
Weather5days: [{date:null},{date:null},{date:null},{date:null},{date:null}]

};

所以我所做的只是从头开始创建5个数组对象。我不知道为什么。但是，这并不是真正的解决方案，因为在某些情况下，我首先不知道数组的长度。有任何想法吗？

Answer 1

使用：从“不变性帮助器”导入更新；

this.setState(prevState => update(prevState, {
    Weather5days: { $set: json.Forecasts}
})

Answer 2

（在编辑之前）您的状态已用Weather5days: [{}]初始化，该数组包含一个元素。然后，将数组复制到newItems中，并使用newItems[i].date读取大于0的索引，这些索引在for循环中超出范围。在用例中使用for循环是不安全的，应该使用Array的map方法来返回新项目：json.Forecasts.map((forecast, index) => ({} /* return your newItem */))

React.js设置对象数组状态的问题

2 个答案: