如何解决如何映射对象数组列表以显示在日历中?
我正在使用react-big-calendar
暗示的Full Calendar
来显示事件列表。我可以在日历中显示一个硬编码的日期,但在显示开始和结束时间的对象上却很费力。我将如何映射此信息列表,以便显示所有事件。日历显示this.state.events
中的事件。
这是我要显示的数据列表:
(7) [{…},{…},{…}]
0: {start: "2020-09-16 17:00:00",end: "2020-09-16 17:15:00"}
1: {start: "2020-09-16 17:15:00",end: "2020-09-16 17:30:00"}
2: {start: "2020-09-16 17:30:00",end: "2020-09-16 17:45:00"}
3: {start: "2020-09-16 17:45:00",end: "2020-09-16 18:00:00"}
4: {start: "2020-09-16 18:00:00",end: "2020-09-16 18:15:00"}
5: {start: "2020-09-16 18:15:00",end: "2020-09-16 18:30:00"}
6: {start: "2020-09-16 18:30:00",end: "2020-09-16 18:45:00"}
这是我当前的代码:
class SchedulePage extends Component {
constructor(props) {
super(props);
this.state = {
events: [
{
start: start_date,end: end_date,title: "15 minute interview",},],};
}
render() {
return (
<div className="calendar-container">
<Calendar
localizer={localizer}
events={this.state.events}
style={{ height: "100vh" }}
onSelectEvent={this.test}
/>
</div>
);
}
}
解决方法
他们的演示使用以下格式进行事件,将您的事件转换为这种格式:
[
{
id: 0,title: 'All Day Event very long title',allDay: true,start: new Date(2015,3,0),end: new Date(2015,1),},{
id: 1,title: 'Long Event',7),10),
,
按照ÇağataySel建议的格式设置数据,
events = [
{
id: 0,{
id: 1,]
然后破坏渲染和返回之间的状态(更容易处理)
const { events } = this.state
然后映射您的数据并将所有内容作为道具传递给您的Calendar组件
<div className="calendar-container">
{events.map((event,index) => {
return (
<Calendar key={index} id={event.id} title={event.title} start=
{event.start.toString()} end={event.end.toString()} />
);
})}
</div>
您的日历组件也应该使用解构来接收数据
const Calendar = ({ id,title,start,end }) => {
return (
...
);
};
...
render() {
const { events } = this.state
return (
<div className="calendar-container">
{events.map((event,index) => {
return (
<Calendar key={index} id={event.id} title={event.title} start=
{event.start.toString()} end={event.end.toString()} />
);
})}
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。