如何从React中的数据迭代和渲染嵌套的对象/数组？

Question

我正在使用react（我对此不太有经验），并且想要呈现数据，问题是一切都嵌套了-带有对象和数组。 我已经尝试了很多不同的方法，但是它没有用。 例如：数据是航班信息。 对于往返行程，我为每个转机航班和相同的靠背安排了一个嵌套数组。 对于其他事情，例如出发机场，它的嵌套方式也有所不同。 由于我想显示多个排期，因此在渲染日期时我必须遍历所有内容，但我不知道该如何做。 我试图在网上找到一些东西，并且一段时间以来一直盯着我的代码，我迷失了很多。 如果有人可以帮助，那就太好了。 我还添加了带有数据的json（我删除了一些键值对，并保留了对嵌套/不同数据结构很重要的键值对）。 非常感谢！

数据：

       {
        "PricedItineraries": [{
            "AirItinerary": {
                "OriginDestinationOptions": {
                    "OriginDestinationOption": [{
                        "FlightSegment": [{


                            "DepartureAirport": {
                                "LocationCode": "JFK"
                            },
                            "ArrivalAirport": {
                                "LocationCode": "MSP"
                            },

                            "DepartureDateTime": "2018-01-07T07:00:00",
                            "OperatingAirline": {
                                "FlightNumber": 111,
                                "Code": "AA"
                            }
                        }, 


                            {
                            "DepartureAirport": {
                                "LocationCode": "MSP"
                            },
                            "ArrivalAirport": {
                                "LocationCode": "LAX"
                            },                    
                            "DepartureDateTime": "2018-01-07T10:05:00",
                            "OperatingAirline": {
                                "FlightNumber": 444,
                                "Code": "SY"
                            }
                        }],
                        "ElapsedTime": 485
                    }, 

                    // ... same structure below for trip back  ...

                       {
                        "FlightSegment": [{

                            "DepartureAirport": {
                                "LocationCode": "LAX"
                            },
                            "DepartureTimeZone": {
                                "GMTOffset": -8
                            }
                        }, 

                            {
                            "DepartureAirport": {
                                "LocationCode": "SEA"
                            },

                            "DepartureTimeZone": {
                                "GMTOffset": -8
                            }
                        }],
                        "ElapsedTime": 745
                    }]
                },

                "DirectionInd": "Return"
            },

            "AirItineraryPricingInfo": {
                "PTC_FareBreakdowns": {
                    "PTC_FareBreakdown": {
                        "PassengerTypeQuantity": {
                            "Quantity": 1,
                            "Code": "ADT"
                        },
                        "Endorsements": {
                            "NonRefundableIndicator": true
                        }
                    }
                },
                "FareInfos": {
                    "FareInfo": [{
                        "TPA_Extensions": {
                            "SeatsRemaining": {
                                "BelowMin": false,
                                "Number": 4
                            }
                        }
                    }
                    }]
                },
                "ItinTotalFare": {
                    "TotalFare": {
                        "CurrencyCode": "USD",
                        "DecimalPlaces": 2,
                        "Amount": 341.61
                    },
                    "Taxes": {
                        "Tax": [{
                            "CurrencyCode": "USD",
                            "DecimalPlaces": 2,
                            "TaxCode": "TOTALTAX",
                            "Amount": 66.25
                        }]
                    }
                }
            },
            "TicketingInfo": {
                "TicketType": "eTicket"
            }
        }, {
            "AirItinerary": {
             ..same structure again...repeats multiple times

反应组件：

   class Search extends React.Component {
        constructor(props){
            super(props);
            this.state={
                origin:'',
                destination:''
                  ...

               // flightinfo
                airlineCodeToDestination:[],
                airport:[],
                departureTime:[],
                arivalTime:[],
                totalDuration:[],
                price:[],
                flightInfo:[]
            }
            this.handleInput=this.handleInput.bind(this);
            this.testing=this.testing.bind(this);
        }
        testing(e){
            this.setState({
                [e.target.name]:e.target.value
            })
        }

        handleInput(e){
            e.preventDefault();
            regularSearchData(this.state.origin, this.state.destination, this.state.departuredate, this.state.returndate)
                .then(function(response){
                    return response.data.PricedItineraries;
            })
               .then(res => {
                    let response=res,
                        allFares=[],
                        airlineCode=[],
                        airport=[],
                        x=[],
                        departureTime=[],
                        arivalTime=[],
                        totalDuration=[];
                 response.map(function(item){

                    //this here are just a few of my tries 

                        allFares.push(item.AirItineraryPricingInfo.ItinTotalFare.TotalFare.Amount);
                        x.push(item.AirItinerary.OriginDestinationOptions.OriginDestinationOption);
                        airlineCode.push(item.AirItinerary.OriginDestinationOptions.OriginDestinationOption[0].FlightSegment[0].MarketingAirline.Code);
                    });

                    this.setState({
                        price:allFares,
                        airlineCodeToDestination:airlineCode,
                        flightInfo:x
                    })
            })
        }
        render () {
            const flights = this.state.flightInfo.map((item, i) => {
                return (
                    <div>
                        <div key={i}> {item} </div>
                    </div>);
            });
            return (
                <div>
                    {flights}
                    <form onSubmit={this.handleInput}>
                    <input type="text" name="origin"  value={this.state.origin} onChange={this.testing} />
                    <input type="text"  name="destination" value={this.state.destination} onChange={this.testing}/>
                    <input type="date" name="departuredate" value={this.state.departuredate} onChange={this.testing} />
                    <input type="date" name="returndate" value={this.state.returndate} onChange={this.testing} />
                    <input type="submit" value="Submit" />
                    </form>
                </div>
            )
        }
    }

    export default Search;

Answer 1

在handleInput方法中，您正在创建新数组并向其中添加数据，然后调用setState将这些新数组设置为新状态，这将导致删除旧状态并仅显示新数组。 如果要保留旧数据，则需要更改代码中变量的声明，如下所示：

                    ....
                    allFares=[...this.state.allFares],
                    airlineCode=[...this.state.airlineCode],
                    ....

这将为您的状态创建现有数组的副本，当您在其中推入新项，然后调用setState进行设置时，不会丢失现有数据。