App.jsx:43 Uncaught (in promise) TypeError: this.state.concerts.map is not a function(...)
Posted
技术标签:
【中文标题】App.jsx:43 Uncaught (in promise) TypeError: this.state.concerts.map is not a function(...)【英文标题】：App.jsx:43 Uncaught (in promise) TypeError: this.state.concerts.map is not a function(…) 【发布时间】：2017-03-20 04:39:45 【问题描述】：当我尝试从 App.jsx 中的 ticketmaster api 呈现 json 时，我不断收到此错误。我在后端的 url 正在提取数据以显示前 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;
这就是来自ticketmaster 的数据在邮递员中的样子：
"_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"
]
,
【问题讨论】：
concerts._embedded 真的是一个数组吗？
它是一个包含对象数组的对象。我将添加邮递员数据
如果你想映射一些东西，它必须是一个数组，所以当你做你的setState(concerts)时，提供一个数组。
您的 JSON 无效
那么在 .then 之后但在 setState(concerts) 之前添加数组？
【参考方案1】：
您将需要使用内部 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>
);
)
【讨论】：
很高兴为您提供帮助。您能否将答案标记为已接受，如果您觉得很慷慨，请点赞:-)以上是关于App.jsx:43 Uncaught (in promise) TypeError: this.state.concerts.map is not a function(...)的主要内容，如果未能解决你的问题，请参考以下文章
Uncaught (in Promise) DOMException: play() 只能由用户手势启动
Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText') in OpenWetherMa
Uncaught (in promise)：消息端口在收到响应之前关闭
解决Uncaught (in promise) reason的问题
解决Uncaught (in promise) reason的问题
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Promise [重复]