ReactJSのDDL Select値の変更に基づいて配列アイテムをフィルタリングおよび設定する方法は？

Question

inventoryBaseの値を、選択したドロップダウンリストの値に基づいてフィルタリングしようとしています。

ここでは、"sectionName": "Arena C-690/pool"に基づいて指定されたJSONをフィルタリングしています。ここで、Arena C-690/poolはドロップダウンリストの最初の値です。

しかし、私は今のところselectedSection関数内のコードのこのthis.state.inventoryBase.map((item) => {行に

Uncaught TypeError: Cannot read property 'inventoryBase' of undefined

のエラーを与えて試してみましたコード。私はこのようなselectedSection機能

と呼ばれる選択変更で

：おそらくthis.state.inventoryBaseのあなたの呼び出しでthisキーワードがない

{ 
    "result": { 
     "InventoryBase": [ 
      {    
       "providerName": "abcd", 
       "EventOffers": [ 
        {       
         "sectionName": "Arena C-690/pool", 
         "seatingArea": { 
          "seating": "Arena C-690/pool", 
          "Price": { 
           "currencyCode": "gbp", 
           "totalPrice": 40.5 
          } 
         }, 
         "min": 1, 
         "max": 8,      
         "free_seat_blocks": { 
          "blocks_by_row": { 
           "22": [ 
            [ 
             "2218" 
            ] 
           ], 
           "23": [ 
            [ 
             "2315"          
            ] 
           ], 
           "24": [ 
            [ 
             "2411", 
             "2412" 
            ] 
           ] 
          }, 
          "restricted_view_seats": []       
         } 
        }, 
        {       
         "sectionName": "Arena D-690/pool", 
         "seatingArea": { 
          "seating": "Arena D-690/pool", 
          "Price": { 
           "currencyCode": "gbp", 
           "totalPrice": 40.5 
          } 
         }, 
         "min": 1, 
         "max": 8,      
         "free_seat_blocks": { 
          "blocks_by_row": { 
           "22": [ 
            [ 
             "2219"          
            ] 
           ], 
           "23": [ 
            [ 
             "2319"           
            ] 
           ], 
           "24": [ 
            [ 
             "2419", 
             "2420" 
            ] 
           ] 
          }, 
          "restricted_view_seats": []       
         } 
        }      
       ], 
       "lastupdatedate": "2017-10-11T07:35:13" 
      } 
     ]  
      { 
       "_id": "59d767c0adea80c9122d8026", 
       "eventid": "41Z4", 
       "name": "Classic Carols - Alan Titchmarsh", 
       "description": "Classic Carols - Alan Titchmarsh", 
       "seatmapstaticUrl": null, 
       "locale": null, 
       "lastupdatedate": "2017-10-06T06:23:43", 
       "providername": "ingresso", 
       "image": [], 
       "venues": [ 
        { 
         "id": "41Z4", 
         "name": "Royal Albert Hall", 
         "url": null, 
         "timezone": null, 
         "address1": null, 
         "address2": null, 
         "city": null, 
         "cityid": null, 
         "state": null, 
         "statecode": null, 
         "country": "United Kingdom", 
         "countrycode": "uk", 
         "postalCode": null, 
         "longitude": null, 
         "latitude": null, 
         "locale": null 
        } 
       ], 
       "priceInfo": {}, 
       "categories": { 
        "id": "music", 
        "name": "music", 
        "subcategory": "music" 
       }, 
       "performance": [ 
        { 
         "providerid": "41Z4-2", 
         "eventDateLocal": "2017-12-20T07:45:00", 
         "eventDateUTC": "2017-12-20T13:45:00Z", 
         "url": "/41Z4-classic-carols-alan-titchmarsh/", 
         "status": "live" 
        }, 
        { 
         "providerid": "41Z4-3", 
         "eventDateLocal": "2017-12-20T12:45:00", 
         "eventDateUTC": "2017-12-20T18:45:00Z", 
         "url": "/41Z4-classic-carols-alan-titchmarsh/", 
         "status": "live" 
        } 
       ] 
      } 
     ] 
    } 
} 

Answer 1

：ここ<select className="form-control" onChange={this.selectedSection}>

selectedSection(e) { 
    var newData = []; 
    this.state.inventoryBase.map((item) => { 
     if(item.sectionName === e.target.value){ 
      console.log(e.target.value) 
      newData.push(item); 
     } 
    }); 
    this.setState({inventoryBase: newData}) 
} 

とJSONでComponentをポイントして別のオブジェクトコンテキストをポイントします。その結果、this.stateは未定義です。

は試してみてください、あなたが状態を定義した後、コンストラクタでのイベントハンドラをバインド：

constructor(props) { 
    super(props); 
    state = { ... state init goes here ... }; 
    // binds the event handler's 'this' to the Component 
    this.selectedSection = this.selectedSection.bind(this); 
}