Question

我是reactjs的新手，我正在学习更改reactjs的状态。我试图初始化一个长度未知的状态的数组对象，然后使用set状态更新该数组对象。以下是代码：

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

所以我已经将Weather5days初始化为一个数组，长度未知。我通过API以json的形式获取Weather5days的数据，因此在获取之后，我这样做：

then(json => {
  var newArr = json.Forecasts.map(function(val) {
    //Forecasts have length of 5 array
    return {
      date: val.Date,
    };
  });

  console.log(newArr); // I checked, data is copied correctly in newArr.

  this.setState({
    Weather5days: newArr, //set state of the weather5days
  });
});

现在上面的代码没有错误，但是当我调用console.log（this.state.Weather5days）时，数组为空。因此，我认为初始化Weather5days的方法是错误的，因此我尝试了以下操作：

state = {
  error: null,
  temperature: null,
  isLoaded: false,
  Weather5days: [{}, {}, {}, {}, {}], //array object of length 5
};

，并且有效。这是解决方案的一半，因为在某些情况下，您不知道数组的长度（来自API），而且我无力每次都做[{}，{} ..]。初始化状态长度未知的数组对象的正确方法是什么？

Answer 1

您可以这样做

const updated = this.state.Weather5days.slice(); 
updated.push(newArr); 
this.setState({Weather5days:updated});

Answer 2

希望这可以。请检查

const {Weather5days}=this.state
              this.setState({
          Weather5days: [...Weather5days,newArr]
      });

Answer 3

将array设置为状态时，需要在callback中验证其更新状态。由于反应中的状态行为是异步的。

 this.setState({
    Weather5days: newArr  //set state of the weather5days
  },()=> {
     console.log(this.state.Weather5days); 
  });

我认为您只是错过了这一点。

Answer 4

您好，您将Weather5days定义为空数组，并向其中添加了newArr，但是您应该采用数组的先前状态，并将newArr添加至这样的状态

this.setState({
Weather5days : [...this.state.Weather5days, newArr]
})

React.js如何在状态下初始化数组对象

4 个答案: