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

Question

I'm new to Reactjs and I'm learning to change state properties using setState method. I have few questions regarding changing state in reactjs.

I'm building a weather web using open weather API for education purpose. I'm saving some properties inside the state so that I can pass them as props to other components. The state is as follows:

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

I have some normal properties(eg temperature, isLoaded) and also array of object called Weather5days. Here I'm going to save weather data for each 5 days; data for each day will go into each array, total length of 5. I know javascript allows to declare array and object with unknown length(is that how you declare it though?), so I have declared it as above. Hence the data in Weather5days it's going to look something like this:

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

Now I wish to add/alter the properties of each array of Weather5days, eg Weather5days[0].temperature = '25' etc... I get this data from weather API as json(also in array) and assign the parsed data to the created Weather5days array object.

I did some googling and found out that I cannot directly mutate state, so I've done the following after fetching:

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

I used for loop here to save the date of all the parsed data from API to each array of Weather5days object. However, this is the error I get:

TypeError: undefined is not an object (evaluating 'newItems[i].date = json.Forecasts[i].Date')

I'm not quite sure why. Maybe I declared the Weather5days object wrong, or should they be declared with a length in the first place? Thank you very much!

UPDATE I've fiddled around with the code and in state I tried to declare Weather5days array as follows and it worked:

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

};

so all I did was literally create 5 array objects in the first place. I don't know why though. However this isn't really the solution as some circumstances I won't know the length of the array in the first place. Any ideas?

Answer 1

Using: import update from 'immutability-helper';

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

Answer 2

Your state was (before edit) initialized with Weather5days: [{}] , an array with one element. Then you copy the array in newItems and you read indexes greater than 0 using newItems[i].date that are out of bound in your for loop. Using a for loop in your use case is unsafe, you should use the Array's map method in order to return your new items : json.Forecasts.map((forecast, index) => ({} /* return your newItem */))