[英]why am i getting a TypeError of undefined map?
I'm working on a React project and im getting this error of undefined map.我正在做一个 React 项目,我收到了未定义的 map 的错误。 We are currently doing some tests too and we are mocking an array with details in it.
我们目前也在做一些测试,我们是 mocking 一个包含详细信息的数组。 I don't know if it is a syntax error or i'm not passing the props right.
我不知道这是语法错误还是我没有正确传递道具。
Here's my code这是我的代码
Event.js事件.js
import Button from 'react-bootstrap/Button'
class Event extends Component {
state = {
collapsed: true,
}
handleClick = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
const { event } = this.props;
const { collapsed } = this.state;
return (
<div className="event">
<h2 className="summary">{event.summary}</h2>
<p className="start-date">
{event.start.dateTime}
</p>
<p className="end-date">
{event.end.dateTime}
</p>
<p className="location">
{event.location}
</p>
<Button variant="outline-info"
className={`${collapsed ? "show" : "hide"}-details`}
onClick={this.handleClick}
>
{collapsed ? "Show Details" : "Hide Details"}
</Button>
{!collapsed &&
<div className={`extra-details ${this.state.collapsed ? "hide" : "show"}`}>
<p className="event-description">{event.description}</p>
</div>
}
</div>
)
}
}
export default Event;
EventList.js:事件列表.js:
import Button from 'react-bootstrap/Button'
class Event extends Component {
state = {
collapsed: true,
}
handleClick = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
const { event } = this.props;
const { collapsed } = this.state;
return (
<div className="event">
<h2 className="summary">{event.summary}</h2>
<p className="start-date">
{event.start.dateTime}
</p>
<p className="end-date">
{event.end.dateTime}
</p>
<p className="location">
{event.location}
</p>
<Button variant="outline-info"
className={`${collapsed ? "show" : "hide"}-details`}
onClick={this.handleClick}
>
{collapsed ? "Show Details" : "Hide Details"}
</Button>
{!collapsed &&
<div className={`extra-details ${this.state.collapsed ? "hide" : "show"}`}>
<p className="event-description">{event.description}</p>
</div>
}
</div>
)
}
}
export default Event;
App.js应用程序.js
import './App.css';
import EventList from './EventList';
import CitySearch from './CitySearch';
import NumberOfEvents from './NumberOfEvents';
function App() {
return (
<div className="App">
<CitySearch />
<NumberOfEvents />
<EventList />
</div>
);
}
export default App;
The error appears in the EventList.js file enter image description here错误出现在 EventList.js 文件中enter image description here
const mockData = [
{
"kind": "calendar#event",
"etag": "\"3181161784712000\"",
"id": "4eahs9ghkhrvkld72hogu9ph3e_20200519T140000Z",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=NGVhaHM5Z2hraHJ2a2xkNzJob2d1OXBoM2VfMjAyMDA1MTlUMTQwMDAwWiBmdWxsc3RhY2t3ZWJkZXZAY2FyZWVyZm91bmRyeS5jb20",
"created": "2020-05-19T19:17:46.000Z",
"updated": "2020-05-27T12:01:32.356Z",
"summary": "Learn JavaScript",
"description": "Have you wondered how you can ask Google to show you the list of the top ten must-see places in London? And how Google presents you the list? How can you submit the details of an application? Well, JavaScript is doing these. :) \n\nJavascript offers interactivity to a dull, static website. Come, learn JavaScript with us and make those beautiful websites.",
"location": "London, UK",
"creator": {
"email": "fullstackwebdev@careerfoundry.com",
"self": true
},
"organizer": {
"email": "fullstackwebdev@careerfoundry.com",
"self": true
},
"start": {
"dateTime": "2020-05-19T16:00:00+02:00",
"timeZone": "Europe/Berlin"
},
"end": {
"dateTime": "2020-05-19T17:00:00+02:00",
"timeZone": "Europe/Berlin"
},
"recurringEventId": "4eahs9ghkhrvkld72hogu9ph3e",
"originalStartTime": {
"dateTime": "2020-05-19T16:00:00+02:00",
"timeZone": "Europe/Berlin"
},
"iCalUID": "4eahs9ghkhrvkld72hogu9ph3e@google.com",
"sequence": 0,
"reminders": {
"useDefault": true
},
"eventType": "default"
},
{
"kind": "calendar#event",
"etag": "\"3181159875584000\"",
"id": "3qtd6uscq4tsi6gc7nmmtpqlct_20200520T120000Z",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=M3F0ZDZ1c2NxNHRzaTZnYzdubW10cHFsY3RfMjAyMDA1MjBUMTIwMDAwWiBmdWxsc3RhY2t3ZWJkZXZAY2FyZWVyZm91bmRyeS5jb20",
"created": "2020-05-19T19:14:30.000Z",
"updated": "2020-05-27T11:45:37.792Z",
"summary": "React is Fun",
"description": "Love HTML, CSS, and JS? Want to become a cool front-end developer? \n\nReact is one of the most popular front-end frameworks. There is a huge number of job openings for React developers in most cities. \n\nJoin us in our free React training sessions and give your career a new direction. ",
"location": "Berlin, Germany",
"creator": {
"email": "fullstackwebdev@careerfoundry.com",
"self": true
},
"organizer": {
"email": "fullstackwebdev@careerfoundry.com",
"self": true
},
"start": {
"dateTime": "2020-05-20T14:00:00+02:00",
"timeZone": "Europe/Berlin"
},
"end": {
"dateTime": "2020-05-20T15:00:00+02:00",
"timeZone": "Europe/Berlin"
},
"recurringEventId": "3qtd6uscq4tsi6gc7nmmtpqlct",
"originalStartTime": {
"dateTime": "2020-05-20T14:00:00+02:00",
"timeZone": "Europe/Berlin"
},
"iCalUID": "3qtd6uscq4tsi6gc7nmmtpqlct@google.com",
"sequence": 0,
"reminders": {
"useDefault": true
},
"eventType": "default"
}
]
export { mockData };
```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.