如何從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進行設置，您不會丟失現有數據。