当我尝试从我的App.jsx中的ticketmaster api渲染json时，我一直收到此错误。我在后端的网址是提取数据以显示前10场音乐会结果。它在chrome中的反应控制台中显示完全正常，当我尝试将结果映射到div时，我收到此错误消息。请帮帮我。
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;
这就是售票员中售票员的数据：
{
"_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"
}
}
}
]
}
},
答案 0 :(得分：0)
您需要使用内部events数组而不是外部_embedded对象。您可以通过以下两种方式之一完成此操作。
设置状态以保存内部events数组
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,
}));
或
使用状态时访问内部events数组
this.state.concerts.events.map((concert) => {
return (
<div>
{concert}
</div>
);
})