TOAST UI Calendar无法展示数据，如何将服务端数据映射到组件根节点？

问题原因 #

• 日历重复渲染：你将<TUICalendar>组件放在了event数组的遍历逻辑中，接口返回的event数组有多少个元素，就会生成多少个日历实例，你看到渲染两次说明接口返回的数组长度为2
• 日程不显示：TUI Calendar的schedules属性要求传入所有日程对象组成的完整数组，你当前遍历后给每个日历传入的是单条日程数据，属性传入格式不符合组件要求，自然无法正常渲染日程

修复方案 #

把日历组件从遍历逻辑中移出来，直接把完整的event数组传给schedules属性即可，修复后代码如下：

const MembersCalendar = () => {
  const [event, setEvent] = useState<any[]>([]);

  useEffect(() => {
     get(`${remoteRoutes.events}`, (data) => { 
        console.log(data);
        setEvent(data);
     })
  },[]);
    
  return (
      <Layout>
          <h1>Calendar</h1>
          {/* 移除遍历逻辑，只渲染一个日历实例，传入完整事件数组 */}
          <TUICalendar 
              height="1000px" 
              view="month" 
              calendars={calendars}
              schedules={event} 
          />
      </Layout>
  )
}

额外检查项 #

如果修改后还是不显示日程，请确认接口返回的event数组中每个对象的字段和TUI Calendar要求的schedules字段规范匹配：必须包含id、calendarId、title、start、end核心字段，字段名不匹配的话需要先做一次数据映射再传给schedules。

内容的提问来源于stack exchange，提问作者Joanita