早上好StackOverflow，
我是一名使用React的编码学生，并且在使用Eventbrite API时遇到问题。我已经记录了要从JSON API响应中获取的数据，但是现在我想编写一个函数，该函数将创建数据名称和值的键值对。我知道可以分配这些对，但是我在搜索中找不到找到这种方法的好方法。
这是我正在使用的代码：
export default class Cards extends React.Component {
constructor(props){
super(props)
this.state = {
cards: {}
}
}
onSubmit = (e) => {
e.preventDefault();
axios.get(`https://www.eventbriteapi.com/v3/events/search/?location.latitude=25.8014116&location.longitude=-80.1990871&location.within=25km&expand=venue,category&token={apitoken}`).then(({data}) => {
this.setState({cards: data})
console.log({data}.data.events[0].name.text)
console.log({data}.data.events[0].start.local)
console.log({data}.data.events[0].end.local)
console.log({data}.data.events[0].venue.address.localized_address_display)
console.log({data}.data.events[0].description.text)
}).catch(err => console.log(err))
}
makeCards = () => {
const cardEvent = this.state.cards.events
cardEvent.map((event, name) => {
return (
<div>
<p>Event Name: {this.state.cards.events.event.name}</p>
</div>
)})
}
}
makeCards函数是我要编写的函数。
以下是API对象返回的示例：
{
"pagination": {
"object_count": 4134,
"page_number": 1,
"page_size": 50,
"page_count": 83,
"has_more_items": true
},
"events": [
{
"name": {
"text": "Wynwood Life 2019: Art / Music / Food / Fashion",
"html": "Wynwood Life 2019: Art / Music / Food / Fashion"
},
"description": {
"text": "\nExperience ALL of Wynwood in ONE weekend! \nWynwood Life is back again for 2019 and will be looking to unite and celebrate the heart of Wynwood through the best local experiences of ART. FOOD. FASHION. DRINKS. MUSIC.\nThis free three-day festival in partnership with SWARM and the Wynwood Bid will feature Wynwood's best of...\n\nART: Must over Art installations from around the globe and world-renown muralist paintingsThe ART OF WAR is a mural battle between 2 incredible teams to determine the best muralist team in Wynwood. This is a yearly competition curated by Creative Glue to highlight the best artist in Miami. Each team is comprised of 3 members all with different artistic styles merge into one team to create a custom 12x8ft Mural. Each will have 2 hours to complete their masterpiece and for the world to see. The crowd, not judges, will decide the winner and a champion will be crowned. Enjoy sounds by DJ Uzo, Revolution Radio and a Muscle Car show activation as the teams battle for the ART OF WAR.\n\n\nFOOD: Indulge in gourmet food from Wynwood's mouth-watering local food businesses, a Food Truck Rally, and the Kitchen Lab with Wynwood's Finest, mixing up your favorite cuisine!\nDRINKS: Curated unique cocktails at thedeck, and your favorite specialty brews from Wynwood's best local Breweries and Restaurants at the Beer Garden \nSouth Florida’s very best Wynwood-based chefs will be showcased at THE KITCHEN LAB with Wynwood’s favorite local breweries to refresh the palette at the Wynwood Beer Garden adjacent to thedeck Wynwood for specialty cocktails sponsored by Espolon Tequila, Absoult, Jack Daniels, and Sip Smith Gin.\n\n\n\nACTIVATIONS: Partake in one-of-a-kind blow your mind sponsor activations\nMUSIC: Expand your musical interests with Wynwood's most eclectic mix of talented Dj's on our live music stages,\nSHOPPING /FASHION: Peruse through Wynwood's beautiful mix of local businesses and our curated Thrifter Market with local vendors displaying creative and unique products \n\nWe look forward to bringing to life the Wynwood culture and allowing those near and far, young and old, to participate in a truly memorable weekend. \nSWARM takes pride in being the innovative trend-starters when it comes to South Florida events and Wynwood Life is sure to encompass just that, with featured partners from iHeart’s Y-100, 103.5 93.9 MIA, and TU94.9\nSchedule: FRIDAY: 4pm - 3am / SATURDAY: 12pm - 3am / SUNDAY: 12pm - 10pm\nRegister for your Free Welcome Drink with RSVP! (First 500 guests to arrive)\nVENDORS: To apply for your spot with us, please visit www.thrifter.coolor call us at 305-239-8833.\nSponsors: Interested in partnering with us or setting up an activation at our event? Please email partners@swarminc.com. \nMust be 21+ to consume alcohol.\n",
"html": "<P CLASS=\"p1\"><SPAN CLASS=\"s1\"><BR></SPAN></P>\n<P><SPAN><STRONG>Experience ALL of Wynwood in ONE weekend!</STRONG> </SPAN></P>\n<P>Wynwood Life is back again for 2019 and will be looking to unite and celebrate the heart of Wynwood through the best local experiences of ART. FOOD. FASHION. DRINKS. MUSIC.</P>\n<P>This free three-day festival in partnership with SWARM and the Wynwood Bid will feature Wynwood's best of...</P>\n<UL>\n<LI>ART: Must over Art installations from around the globe and world-renown muralist paintings<BR><BR>The ART OF WAR is a mural battle between 2 incredible teams to determine the best muralist team in Wynwood. This is a yearly competition curated by Creative Glue to highlight the best artist in Miami. Each team is comprised of 3 members all with different artistic styles merge into one team to create a custom 12x8ft Mural. Each will have 2 hours to complete their masterpiece and for the world to see. The crowd, not judges, will decide the winner and a champion will be crowned. Enjoy sounds by DJ Uzo, Revolution Radio and a Muscle Car show activation as the teams battle for the ART OF WAR.</LI>\n</UL>\n<UL>\n<LI>FOOD: Indulge in gourmet food from Wynwood's mouth-watering local food businesses, a Food Truck Rally, and the Kitchen Lab with Wynwood's Finest, mixing up your favorite cuisine!</LI>\n<LI>DRINKS: Curated unique cocktails at thedeck, and your favorite specialty brews from Wynwood's best local Breweries and Restaurants at the Beer Garden <BR>\n<P>South Florida’s very best Wynwood-based chefs will be showcased at THE KITCHEN LAB with Wynwood’s favorite local breweries to refresh the palette at the Wynwood Beer Garden adjacent to thedeck Wynwood for specialty cocktails sponsored by Espolon Tequila, Absoult, Jack Daniels, and Sip Smith Gin.</P>\n</LI>\n</UL>\n<UL>\n<LI>ACTIVATIONS: Partake in one-of-a-kind blow your mind sponsor activations</LI>\n<LI>MUSIC: Expand your musical interests with Wynwood's most eclectic mix of talented Dj's on our live music stages,</LI>\n<LI>SHOPPING /FASHION: Peruse through Wynwood's beautiful mix of local businesses and our curated Thrifter Market with local vendors displaying creative and unique products </LI>\n</UL>\n<P>We look forward to bringing to life the Wynwood culture and allowing those near and far, young and old, to participate in a truly memorable weekend. </P>\n<P>SWARM takes pride in being the innovative trend-starters when it comes to South Florida events and Wynwood Life is sure to encompass just that, with featured partners from iHeart’s Y-100, 103.5 93.9 MIA, and TU94.9</P>\n<P><STRONG>Schedule: </STRONG>FRIDAY: 4pm - 3am / SATURDAY: 12pm - 3am / SUNDAY: 12pm - 10pm</P>\n<P>Register for your <STRONG>Free Welcome Drink</STRONG> with RSVP! (First 500 guests to arrive)</P>\n<P>VENDORS: To apply for your spot with us, please visit <A HREF=\"http://www.thrifter.cool/\" TARGET=\"_blank\" TITLE=\"thrifter.cool\" REL=\"nofollow noopener noreferrer\">www.thrifter.cool</A>or call us at 305-239-8833.</P>\n<P><SPAN>Sponsors: Interested in partnering with us or setting up an activation at our event? Please email partners@swarminc.com. </SPAN></P>\n<P>Must be 21+ to consume alcohol.</P>\n<P><BR></P>"
},
"id": "46885450645",
"url": "https://www.eventbrite.com/e/wynwood-life-2019-art-music-food-fashion-tickets-46885450645?aff=ebapi",
"vanity_url": "https://wynwoodlife2019.eventbrite.com",
"start": {
"timezone": "America/New_York",
"local": "2019-01-25T16:00:00",
"utc": "2019-01-25T21:00:00Z"
},
"end": {
"timezone": "America/New_York",
"local": "2019-01-27T22:00:00",
"utc": "2019-01-28T03:00:00Z"
},
"organization_id": "184586633563",
"created": "2018-06-08T15:34:34Z",
"changed": "2019-01-26T00:01:43Z",
"capacity": null,
"capacity_is_custom": null,
"status": "started",
"currency": "USD",
"listed": true,
"shareable": true,
"online_event": false,
"tx_time_limit": 480,
"hide_start_date": false,
"hide_end_date": false,
"locale": "en_US",
"is_locked": false,
"privacy_setting": "unlocked",
"is_series": false,
"is_series_parent": false,
"is_reserved_seating": false,
"show_pick_a_seat": false,
"show_seatmap_thumbnail": false,
"show_colors_in_seatmap_thumbnail": false,
"source": "create_2.0",
"is_free": true,
"version": "3.0.0",
"logo_id": "54738459",
"organizer_id": "11192435431",
"venue_id": "28662946",
"category_id": "113",
"subcategory_id": null,
"format_id": "11",
"resource_uri": "https://www.eventbriteapi.com/v3/events/46885450645/",
"is_externally_ticketed": false,
"category": {
"resource_uri": "https://www.eventbriteapi.com/v3/categories/113/",
"id": "113",
"name": "Community & Culture",
"name_localized": "Community & Culture",
"short_name": "Community",
"short_name_localized": "Community"
},
"venue": {
"address": {
"address_1": "2250 NW",
"address_2": null,
"city": "Miami",
"region": "FL",
"postal_code": "33127",
"country": "US",
"latitude": "25.7989654",
"longitude": "-80.19614580000001",
"localized_address_display": "2250 NW, Miami, FL 33127",
"localized_area_display": "Miami, FL",
"localized_multi_line_address_display": [
"2250 NW",
"Miami, FL 33127"
]
},
"resource_uri": "https://www.eventbriteapi.com/v3/venues/28662946/",
"id": "28662946",
"age_restriction": null,
"capacity": null,
"name": "The Wynwood Marketplace",
"latitude": "25.7989654",
"longitude": "-80.19614580000001"
},
"logo": {
"crop_mask": {
"top_left": {
"x": 0,
"y": 0
},
"width": 2160,
"height": 1080
},
"original": {
"url": "https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F54738459%2F184586633563%2F1%2Foriginal.20190107-182831?auto=compress&s=f79344d814eacca11bf975d22df04d85",
"width": 2160,
"height": 1080
},
"id": "54738459",
"url": "https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F54738459%2F184586633563%2F1%2Foriginal.20190107-182831?h=200&w=450&auto=compress&rect=0%2C0%2C2160%2C1080&s=3eb070852326c71eb337efd0bc481934",
"aspect_ratio": "2",
"edge_color": "#e3ccd0",
"edge_color_set": true
}
}
数组“事件”中有49个对象，我正尝试对其进行迭代。
更新：我离我想完成的目标越来越近，但是现在我在道具/状态上有一个问题，我似乎无法识别。我的错误是不同程度的“无法识别未定义的名称类型”或“无法识别未定义的事件类型”。这是我正在使用的更新代码：
CardsList.jsx
> import React from 'react'
import { Grid, Card } from 'semantic-ui-react';
import Cards from '../bundles/Cards/components/Cards'
const CardsList = props => {
return (
<Grid columns='equal' centered>
{props.cards.map((eventcard, index) => {
return <Cards key={index} eventcard={eventcard} />
})}
</Grid>
)
}
export default CardsList
这是Cards.jsx
> import React from 'react'
import axios from 'axios'
import { Grid, Card } from 'semantic-ui-react';
import CardsList from '../bundles/CardsList/components/CardsList'
export default class Cards extends React.Component {
constructor(props){
super(props)
this.state = {
cards: {}
}
}
onSubmit = (e) => {
e.preventDefault();
axios.get(`https://www.eventbriteapi.com/v3/events/search/?location.latitude=25.8014116&location.longitude=-80.1990871&location.within=25km&expand=venue,category&token={apitoken}`).then(({data}) => {
this.setState({cards: data})
console.log(this.state.cards.events[0].name.text)
console.log(this.state.cards.events[0].start.local)
console.log(this.state.cards.events[0].end.local)
console.log(this.state.cards.events[0].venue.address.localized_address_display)
console.log(this.state.cards.events[0].description.text)
}).catch(err => console.log(err))
}
render() {
return (
<div>
<div>
<p>Map coordinates</p>
<button className="submitbutton" onClick={this.onSubmit}>Submit</button>
<button className="submitbutton" onClick={CardsList}>MakeCards</button>
<p>{this.state.cards["name"]}</p>
</div>
<div>
<Grid.Column>
<Grid.Row>
<Card>
<Card.Content>
<Card.Header>Card</Card.Header>
<Card.Meta>
<span>{this.props.name}</span><br/>
</Card.Meta>
<Card.Description>{this.props.cards}</Card.Description>
</Card.Content>
</Card>
</Grid.Row>
</Grid.Column>
</div>
</div>
)
}
}