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进行设置时，您将不会丢失现有数据。

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

1 个答案: