javascript - Reactjs how to initialize array object in state - Stack Overflow

admin管理员组

文章数量:1341457

I'm new to reactjs and i'm learning to change state in reactjs. I'm trying to initialize an array object in state with unknown length, and later update the array object using set state. Following is the code:

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

So I have initialized Weather5days as an array, with unknown length. I get the data for Weather5days through API as json, so after fetch, I do this:

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
  });
});

Now above code works with no error, but when I call console.log(this.state.Weather5days), the array is empty. So I thought the way of initializing Weather5days was wrong so I tried the following:

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

and It works. This is half the solution because in certain circumstances, you don't know the length of the array(that es from the API) and I cannot afford to do literally do [{},{}..] everytime. What is the proper way of initializing array object with unknown length in state?

I'm new to reactjs and i'm learning to change state in reactjs. I'm trying to initialize an array object in state with unknown length, and later update the array object using set state. Following is the code:

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

So I have initialized Weather5days as an array, with unknown length. I get the data for Weather5days through API as json, so after fetch, I do this:

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
  });
});

Now above code works with no error, but when I call console.log(this.state.Weather5days), the array is empty. So I thought the way of initializing Weather5days was wrong so I tried the following:

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

and It works. This is half the solution because in certain circumstances, you don't know the length of the array(that es from the API) and I cannot afford to do literally do [{},{}..] everytime. What is the proper way of initializing array object with unknown length in state?

• javascript
• arrays
• reactjs
• react-native

Share Follow edited Aug 22, 2018 at 6:42 Joshua 3,20633 gold badges2626 silver badges4141 bronze badges asked Aug 22, 2018 at 5:01 Eric AhnEric Ahn 40122 gold badges88 silver badges1919 bronze badges 3

• use the push method in array in order to put the value in the array, kinda like this. this.state.Weather5days.push(newArr); – John Wick Commented Aug 22, 2018 at 5:04
• @JohnWick if i directly push to Weather5days that would be directly mutating the state which should be avoided in reactjs as far as I know – Eric Ahn Commented Aug 22, 2018 at 5:06
• You can update your state like this this.setState({ Weather5days: [...this.state.Weather5days, newArr] }) or like this: this.setState({ Weather5days: this.state.Weather5days.concat([newArr]) }) – Fcmam5 Commented Aug 22, 2018 at 5:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Hi your defined the Weather5days as empty array and adding the newArr to it but you should take the previous state of array and add your newArr to the state like this

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

you can do it like this

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

hope this could work.please check

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

When you set array in state you need to verify its updated state in callback. Because of the behavior of states in react are asynchronous.

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

I think you are missing this point only.

本文标签： javascriptReactjs how to initialize array object in stateStack Overflow