如何从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方法，要创建新的数组和添加数据them.Then您呼叫setState设置这些新的数组作为你的新状态，这将导致旧状态被删除，只有新阵列出现。 如果你希望你的旧数据持久化，你需要更改代码的变量的声明如下：

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

这会从你的状态创建退出阵列的副本，当你把你的新项目，然后拨打setState进行设置，您不会丢失现有数据。