Question

我将每个响应实体存储在对象中，然后将其放入数组中情况1在起作用，情况2在不起作用。

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

 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运作良好，但除了添加几个对象之后我什么也没做任何改变

在React.js中存储和获取对象数组

0 个答案: