javascript - 在 Reactjs 中存储和获取对象数组

Question

我将每个响应实体存储在对象中，然后将它们推送到案例 1 正在工作而案例 2 不工作的数组中。

案例 1 来自外部 JSON 文件的虚拟数据：

 const {addEvent} = this.props
         var airportList= FlightInfo.Airport; //FlightInfo carries data in JSON 
                                              //file
        var newEvents=[];

        for(var rootKey in airportList){
          if(rootKey===airportValueSelected)
           { 

               airportList[rootKey].forEach(element => {


                   if(element.flight_no===flightValue){

                     for(var m=0;m<element.Events.length;m++){
                    var singleEvent={
                    event_name:'',
                    date_time:'',
                    status:'',
                    }

                      singleEvent.event_name=element.Events[m].event_name;
                      singleEvent.date_time=element.Events[m].date_time;
                      singleEvent.status=element.Events[m].status;
                      newEvents.push(singleEvent);
                    }

                    for(var s=0;s<element.Alerts.length;s++){

                      newAlerts.push(element.Alerts[s]["Alert"+(s+1)]);

                    }

                   }

               });
               addEvent(newEvents);

案例 2 的控制台结果：

如果你仔细观察，上面的回复我得到 [{...}]

现在来自服务器响应的案例 2

axios.get('http://localhost:6020/fetchData?name='+data1+'&flight_no='+data2+'&date='+data3)

               .then(res=>{
               console.log(res);
               console.log(res.data.resultSet);
               if(res.data.error==null || res.data.error===""){
                 res.data.resultSet.forEach(element => {
                   var singleEvent={
                     completionIntent:'',
                     Name:'',
                     flightno:'',
                     date:'',
                     audioFileName:'',
                     status:'',
                   };

                   singleEvent.airportName=element.airportName;
                   singleEvent.completionIntent=element.completionIntent;
                   singleEvent.audioFileName=element.audioFileName;
                   singleEvent.flightno=element.flightno;
                   singleEvent.departureDate=element.departureDate;
                   singleEvent.status='On-time';
                   newEvents.push(singleEvent);
                 });

               }
           }).catch((e)=>console.log("Can’t access"+e));
           console.log(newEvents);
           addEvent(newEvents);

案例 2 的控制台结果：

现在在第二种情况下，当我将这些newEvents传递给 B(main) 组件然后传递给 C 组件时，当我尝试获取值时它变为空{this.props.events}

B组份：

export default class userLogin extends Component {
    constructor() {
        super();
        this.state = {
            events:[],
        };

      }

      addEvent = newEvent => this.setState({
        events: newEvent
      });

  render(){
        const {events} = this.state

        return(

                    <SearchFlight events={events} alerts={alerts} addAlert={this.addAlert} addEvent={this.addEvent} />

                    <Events events={events}/>

        );

    }

更新：添加事件组件

render(){
       console.log("this event:"+this.props.events);
        return(
            <div style={{display:'block',}}>
            <div className="row" >

            {this.props.events.map((event) =>
               (
                <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3" key={event.completionIntent}  >
               <Card style={{minWidth : '275px', backgroundColor:'#F5F5F5', marginBottom:'10px', marginRight:'2px',}}>
                    <CardContent>
                        <Typography style={{fontSize:'14px',}} color="textSecondary" gutterBottom>
                        <p style={{fontSize:'20px',width:'78px', marginBottom:'0px',float:'right',}} >{event.status}</p>
                        </Typography>
                        <Typography variant="h5" component="h2" style={{fontWeight:'bold',}}>
                         {event.airportName.toUpperCase()}
                        </Typography>
                        <Typography style={{marginBottom:'12px'}} color="textSecondary">
                        Event
                        </Typography>
                        <Typography component="p" style={{color: event.status==='On-time'?'#33691E':event.status==='Delayed'?'#D50000':'grey', fontSize: '12px',}}>
                        {event.departureDate}
                        <br />
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button size="small">Download Audio {event.audioFileName}</Button>
                    </CardActions>
                </Card>
                </div>
                ))}
            </div>
            </div>
        );
    }

问题：传递给事件组件时获取空道具事件。案例 1 工作正常，但我没有更改任何内容，只是添加了更多对象并且它停止工作

标签： javascriptreactjs