如何在React Native中使用数组设置状态

Question

I am getting an from External APi, by which i am setting State in ComponentWillMount, but it only stores the last value of array, not the whole list of array. What am i doing wrong ?

Here is my code: Update, My Full Component Code
class PlanStatus extends Component {

componentWillMount() {

  const { phone, orderNo } = this.props.navigation.state.params;
  this.props.fetchPlanStatus({phone, orderNo}, (snapShotValue) => {
      const fetchedPlans = snapShotValue;
      //_.map(snapShotValue.orderValidity, (val,uid) => ({uid, ...val}))
      const markedDates = fetchedPlans.orderValidity[0].deliveryDates.forEach(element => {
          this.setState((prevState) => ({ dates: [...prevState.dates, element.date], deliveryStatus: element.deliveryStatus, startingDay: [element.startingDay], endingDay: element.endingDay }));
          console.log(element.date)            
      });
      this.setState({ finalPlanStatus: fetchedPlans })
  });
  }

onPressDateHandler(day) {
this.setState({ date: day });
console.log(this.state.dates);
 }


 state = {date: "", finalPlanStatus: null, dates: [], deliveryStatus: [], 
startingDay: "", endingDay: []}
render () {
    const date = format(new Date(), 'YYYY-MM-DD');
    return (
      <Container>
        <View style={{ paddingTop: 30, paddingLeft: 40 }}>
          <H1>Plan Status</H1>
        </View>
        {this.props.spinner && <Spinner color='blue' />}


        <View style={this.props.spinner === false ? { display:'flex', paddingTop: 20 } : { display:'none', paddingTop: 20 }}>
           <Calendar 
           minDate={date}
           maxDate={'2019-02-20'}
           onDayPress={(day) => this.onPressDateHandler(day)}
           markedDates={
            {'2019-02-02': {color:'#22a6b3', startingDay: true, selected: true},
             '2019-02-03': {color: '#22a6b3'},
             '2019-02-05': {endingDay: true, color: '#22a6b3', textColor: 'gray'},
             '2019-02-04': {color: '#22a6b3', selected: true}
            }}
            displayLoadingIndicator
            markingType={'period'}
           />
        </View>
        <View>
          <Text>{this.state.date.dateString}</Text>
        </View>

      </Container>
    );
}

}

By this, while doing forEach on deliveryDates, it correctly shows the list of array as follows:

deliveryDates: Array(3)
0: {date: "2019-02-03", deliveryStatus: false, endingDay: false, startingDay: true}
1: {date: "2019-02-04", deliveryStatus: false, endingDay: false, startingDay: true}
2: {date: "2019-02-05", deliveryStatus: false, endingDay: false, startingDay: false}
length: 3
__proto__: Array(0)

And, then from this, i am setting the states as above code. But, my state value is only being the last value of the array. And here is my initial state,

state = {finalPlanStatus: null, dates: [], deliveryStatus: [], startingDay: "", endingDay: []}

Answer 1

Try this,

componentWillMount() {

  const { phone, orderNo } = this.props.navigation.state.params;
  this.props.fetchPlanStatus({phone, orderNo}, (snapShotValue) => {
      const fetchedPlans = snapShotValue;
      const dates = fetchedPlans.orderValidity[0].deliveryDates.map(element => element.date)
      this.setState((prevState) => { return { dates: [...prevState.dates, ...dates], finalPlanStatus: fetchedPlans } })
  });
  }