1. Accueil
  2. Question et réponse
  3. App.jsx: 43 Uncaught (en promesse) TypeError: this.state.concerts.map n'est pas une fonction (...)

App.jsx: 43 Uncaught (en promesse) TypeError: this.state.concerts.map n'est pas une fonction (...)

2016-11-06 3 views
1

Je continue d'obtenir cette erreur lorsque j'essaie de rendre json à partir de l'API ticketmaster dans mon application. jsx. L'URL que j'ai sur mon backend tire les données pour montrer les 10 premiers résultats de concert. Il se montre parfaitement bien dans ma console de réaction en chrome, mis quand j'essaie de mapper les résultats à un div, je reçois ce message d'erreur. Aidez-moi, s'il vous plaît.App.jsx: 43 Uncaught (en promesse) TypeError: this.state.concerts.map n'est pas une fonction (...)

import React, { Component } from 'react'; 

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     concerts: [], 
    } 
    this.handleZip = this.handleZip.bind(this); 
} 
    handleZip(e) { 
    e.preventDefault(); 
    let zip = e.target.value; 
    if (zip) { 
     fetch(`api/services/ticketmaster/shows/${zip}`) 
     .then((response) => { 
     response.json().then(concerts => this.setState({ 
      concerts: concerts._embedded, 
     // name: Object.values(concerts._embedded.events[0].images[0]), 
     // image: concerts._embedded.events[0].images[0], 
     // url: concerts._embedded.events[0].url, 
     // info: concerts._embedded.events[0].info, 
     // date: concerts._embedded.events[0].classifications[0].name, 
     })); 
     }); 
    } 
    } 
render() { 
    return (
     <div className="search-container"> 
     <div className="zipcode-search-bar"> 
     <input onBlur={this.handleZip} type="text" placeholder="Enter  your zip code" /> 
     </div> 
     <div className="zipcode-search-btn"> 
      <button className="zip-btn" onBlur= {this.handleZip}>Search</button> 
     </div> 
     <div> 
     { 
      this.state.concerts.map((concert) => { 
      return (
       <div> 
       {concert} 
       </div> 
      ); 
      }) 
     } 
     </div> 
    </div> 
); 
} 
} 

export default App;

Voici ce que les données de Ticketmaster ressemble à postman:

{ 
    "_embedded": { 
    "events": [ 
     { 
    "name": "Big Gigantic", 
    "type": "event", 
    "id": "k7vGFfodZESLi", 
    "test": false, 
    "url": "http://ticketmaster.com/event/00005110C09F37EC", 
    "locale": "en-us", 
    "images": [ 
     { 
     "ratio": "16_9", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025- b49a-5e20544c52e6_153341_EVENT_DETAIL_PAGE_16_9.jpg", 
     "width": 205, 
     "height": 115, 
     "fallback": false 
     }, 
     { 
     "ratio": "16_9", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_LARGE_16_9.jpg", 
     "width": 2048, 
     "height": 1152, 
     "fallback": false 
     }, 
     { 
     "ratio": "16_9", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_LANDSCAPE_16_9.jpg", 
     "width": 1136, 
     "height": 639, 
     "fallback": false 
     }, 
     { 
     "ratio": "3_2", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_3_2.jpg", 
     "width": 1024, 
     "height": 683, 
     "fallback": false 
     }, 
     { 
     "ratio": "16_9", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_16_9.jpg", 
     "width": 1024, 
     "height": 576, 
     "fallback": false 
     }, 
     { 
     "ratio": "3_2", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_3_2.jpg", 
     "width": 640, 
     "height": 427, 
     "fallback": false 
     }, 
     { 
     "ratio": "16_9", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_16_9.jpg", 
     "width": 640, 
     "height": 360, 
     "fallback": false 
     }, 
     { 
     "ratio": "16_9", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RECOMENDATION_16_9.jpg", 
     "width": 100, 
     "height": 56, 
     "fallback": false 
     }, 
     { 
     "ratio": "3_2", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_ARTIST_PAGE_3_2.jpg", 
     "width": 305, 
     "height": 203, 
     "fallback": false 
     }, 
     { 
     "ratio": "4_3", 
     "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_CUSTOM.jpg", 
     "width": 305, 
     "height": 225, 
     "fallback": false 
     } 
    ], 
    "sales": { 
     "public": { 
     "startDateTime": "2016-09-09T14:00:00Z", 
     "startTBD": false, 
     "endDateTime": "2016-11-06T00:00:00Z" 
     }, 
     "presales": [ 
     { 
      "startDateTime": "2016-09-07T14:00:00Z", 
      "endDateTime": "2016-09-09T02:00:00Z", 
      "name": "Venue Presale" 
     } 
     ] 
    }, 
    "dates": { 
     "start": { 
     "localDate": "2016-11-05", 
     "localTime": "21:00:00", 
     "dateTime": "2016-11-06T01:00:00Z", 
     "dateTBD": false, 
     "dateTBA": false, 
     "timeTBA": false, 
     "noSpecificTime": false 
     }, 
     "timezone": "America/New_York", 
     "status": { 
     "code": "offsale" 
     } 
    }, 
    "classifications": [ 
     { 
     "primary": true, 
     "segment": { 
      "id": "KZFzniwnSyZfZ7v7nJ", 
      "name": "Music" 
     }, 
     "genre": { 
      "id": "KnvZfZ7vAvF", 
      "name": "Dance/Electronic" 
     }, 
     "subGenre": { 
      "id": "KZazBEonSMnZfZ7vAJ1", 
      "name": "Club Dance" 
     } 
     } 
    ], 
    "promoter": { 
     "id": "653", 
     "name": "LIVE NATION MUSIC", 
     "description": "LIVE NATION MUSIC/NTL/USA" 
    }, 
    "info": "Big Gigantic has always been dedicated to giving back to those in need through their #ABigGiganticDifference Initiative. On this Brighter Future tour, they will continue the #ABigGiganticDifference mission by donating a percentage of ticket sales from each show to a local nonprofit of charity in need in each city. In our city of Huntington, they will be supporting the mission to collect toys for children in need by donating to Toys of Hope. If you'd like more information on Toys of Hope or would like to look into further volunteer or donation options with them, please visit http://www.toysofhope.org/contact_us.html. Thank you for continuing to support their initiative and by purchasing a ticket to this show, you are truly making #ABigGiganticDifference in our city!", 
    "priceRanges": [ 
     { 
     "type": "standard", 
     "currency": "USD", 
     "min": 25, 
     "max": 66 
     } 
    ], 
    "_links": { 
     "self": { 
     "href": "/discovery/v2/events/k7vGFfodZESLi?locale=en-us" 
     }, 
     "attractions": [ 
     { 
      "href": "/discovery/v2/attractions/K8vZ917GRLf?locale=en-us" 
     }, 
     { 
      "href": "/discovery/v2/attractions/K8vZ9173V70?locale=en-us" 
     } 
     ], 
     "venues": [ 
     { 
      "href": "/discovery/v2/venues/KovZpZAEAEtA?locale=en-us" 
     } 
     ] 
    }, 
    "_embedded": { 
     "venues": [ 
     { 
      "name": "The Paramount", 
      "type": "venue", 
      "id": "KovZpZAEAEtA", 
      "test": false, 
      "url": "http://ticketmaster.com/venue/1280", 
      "locale": "en-us", 
      "postalCode": "11743", 
      "timezone": "America/New_York", 
      "city": { 
      "name": "Huntington" 
      }, 
      "state": { 
      "name": "New York", 
      "stateCode": "NY" 
      }, 
      "country": { 
      "name": "United States Of America", 
      "countryCode": "US" 
      }, 
      "address": { 
      "line1": "370 New York Ave" 
      }, 
      "location": { 
      "longitude": "-73.42591099", 
      "latitude": "40.86969685" 
      }, 
      "markets": [ 
      { 
       "id": "35" 
      }, 
      { 
       "id": "124" 
      } 
      ], 
      "dmas": [ 
      { 
       "id": 296 
      }, 
      { 
       "id": 345 
      } 
      ], 
      "social": { 
      "twitter": { 
       "handle": "@TheParamountNY" 
      } 
      }, 
      "boxOfficeInfo": { 
      "phoneNumberDetail": "For more information please visit paramountny.com VIP Seating and Packages: Please call 631-673-7300 or visit paramountny.com", 
      "acceptedPaymentDetail": "Cash, Visa, MasterCard, Discover, Diners Club, & American Express", 
      "willCallDetail": "Location : Main Lobby Opens : 1 hour prior to show or event" 
      }, 
      "parkingDetail": "For parking information please visit : paramountny.com", 
      "accessibleSeatingDetail": "This is an accessible venue.", 
      "generalInfo": { 
      "generalRule": "NO cameras NO recording NO outside food or beverages (including alcohol) Backpacks and large bags must must be checked. ALL bags are subject to search. Smoking is NOT permitted", 
      "childRule": "Everyone needs a ticket to enter" 
      }, 
      "_links": { 
      "self": { 
       "href": "/discovery/v2/venues/KovZpZAEAEtA?locale=en-us" 
      } 
      } 
     } 
     ], 
     "attractions": [ 
     { 
      "name": "Big Gigantic", 
      "type": "attraction", 
      "id": "K8vZ917GRLf", 
      "test": false, 
      "url": "http://ticketmaster.com/artist/1474639", 
      "locale": "en-us", 
      "images": [ 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_EVENT_DETAIL_PAGE_16_9.jpg", 
       "width": 205, 
       "height": 115, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_LARGE_16_9.jpg", 
       "width": 2048, 
       "height": 1152, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_LANDSCAPE_16_9.jpg", 
       "width": 1136, 
       "height": 639, 
       "fallback": false 
      }, 
      { 
       "ratio": "3_2", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_3_2.jpg", 
       "width": 1024, 
       "height": 683, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_16_9.jpg", 
       "width": 1024, 
       "height": 576, 
       "fallback": false 
      }, 
      { 
       "ratio": "3_2", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_3_2.jpg", 
       "width": 640, 
       "height": 427, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_16_9.jpg", 
       "width": 640, 
       "height": 360, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RECOMENDATION_16_9.jpg", 
       "width": 100, 
       "height": 56, 
       "fallback": false 
      }, 
      { 
       "ratio": "3_2", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_ARTIST_PAGE_3_2.jpg", 
       "width": 305, 
       "height": 203, 
       "fallback": false 
      }, 
      { 
       "ratio": "4_3", 
       "url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_CUSTOM.jpg", 
       "width": 305, 
       "height": 225, 
       "fallback": false 
      } 
      ], 
      "classifications": [ 
      { 
       "primary": true, 
       "segment": { 
       "id": "KZFzniwnSyZfZ7v7nJ", 
       "name": "Music" 
       }, 
       "genre": { 
       "id": "KnvZfZ7vAvF", 
       "name": "Dance/Electronic" 
       }, 
       "subGenre": { 
       "id": "KZazBEonSMnZfZ7vAJ1", 
       "name": "Club Dance" 
       } 
      } 
      ], 
      "_links": { 
      "self": { 
       "href": "/discovery/v2/attractions/K8vZ917GRLf?locale=en-us" 
      } 
      } 
     }, 
     { 
      "name": "Illenium", 
      "type": "attraction", 
      "id": "K8vZ9173V70", 
      "test": false, 
      "url": "http://ticketmaster.com/artist/2035639", 
      "locale": "en-us", 
      "images": [ 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_RETINA_PORTRAIT_16_9.jpg", 
       "width": 640, 
       "height": 360, 
       "fallback": false 
      }, 
      { 
       "ratio": "3_2", 
       "url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_ARTIST_PAGE_3_2.jpg", 
       "width": 305, 
       "height": 203, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_TABLET_LANDSCAPE_16_9.jpg", 
       "width": 1024, 
       "height": 576, 
       "fallback": true 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_EVENT_DETAIL_PAGE_16_9.jpg", 
       "width": 205, 
       "height": 115, 
       "fallback": false 
      }, 
      { 
       "ratio": "4_3", 
       "url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_CUSTOM.jpg", 
       "width": 305, 
       "height": 225, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_TABLET_LANDSCAPE_LARGE_16_9.jpg", 
       "width": 2048, 
       "height": 1152, 
       "fallback": true 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_RECOMENDATION_16_9.jpg", 
       "width": 100, 
       "height": 56, 
       "fallback": false 
      }, 
      { 
       "ratio": "16_9", 
       "url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_RETINA_LANDSCAPE_16_9.jpg", 
       "width": 1136, 
       "height": 639, 
       "fallback": true 
      }, 
      { 
       "ratio": "3_2", 
       "url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_TABLET_LANDSCAPE_3_2.jpg", 
       "width": 1024, 
       "height": 683, 
       "fallback": true 
      }, 
      { 
       "ratio": "3_2", 
       "url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_RETINA_PORTRAIT_3_2.jpg", 
       "width": 640, 
       "height": 427, 
       "fallback": false 
      } 
      ], 
      "classifications": [ 
      { 
       "primary": true, 
       "segment": { 
       "id": "KZFzniwnSyZfZ7v7nJ", 
       "name": "Music" 
       }, 
       "genre": { 
       "id": "KnvZfZ7vAvF", 
       "name": "Dance/Electronic" 
       }, 
       "subGenre": { 
       "id": "KZazBEonSMnZfZ7vAJ1", 
       "name": "Club Dance" 
       } 
      } 
      ], 
      "_links": { 
      "self": { 
       "href": "/discovery/v2/attractions/K8vZ9173V70?locale=en-us" 
      } 
      } 
     } 
     ] 
    } 
    },

Source

2016-11-06 Joemint1418

+0

est 'concerts._embedded 'vraiment un tableau? – topheman

+0

c'est un objet qui contient un tableau d'objets. J'ajouterai les données du facteur – Joemint1418

+2

Si vous voulez mapper sur quelque chose, cela doit être un tableau, donc quand vous faites votre 'setState ({concerts})', fournissez un tableau. – topheman

Répondre

0

Vous aurez besoin d'utiliser le tableau events intérieur plutôt que l'objet _embedded extérieur. Vous pouvez le faire de deux façons.

Définir l'état de tenir le tableau events intérieur

response.json().then(concerts => this.setState({ 
      concerts: concerts._embedded.events, 
     // name: Object.values(concerts._embedded.events[0].images[0]), 
     // image: concerts._embedded.events[0].images[0], 
     // url: concerts._embedded.events[0].url, 
     // info: concerts._embedded.events[0].info, 
     // date: concerts._embedded.events[0].classifications[0].name, 
     }));

ou

Accédez intérieur du tableau events interne lorsque l'état est utilisé

this.state.concerts.events.map((concert) => { 
    return (
    <div> 
     {concert} 
    </div> 
); 
})

Source

2016-11-07 11:12:29 biofractal

+0

Merci beaucoup. Cela a beaucoup aidé. Ça marche! – Joemint1418

+1

Content de vous aider. Pouvez-vous marquer la réponse comme acceptée s'il vous plaît, et l'augmenter si vous vous sentez généreux :-) – biofractal

 Questions connexes

  • Aucun problème connexe^_^