完整日历未显示来自 reactjs 中的 Firebase Firestore 的事件答案

【问题标题】：Full Calendar Not Showing Events Coming From Firebase Firestore in reactjs完整日历未显示来自 reactjs 中的 Firebase Firestore 的事件
【发布时间】：2022-07-04 19:44:49
【问题描述】：

我正在使用包 @fullcalendar/react 在我的管理仪表板网站中创建一个日历。我想要的是允许管理员添加事件，它们会显示在 firebase firestore 数据库的完整日历中。

但是当我获取我的事件集合时，它只会在日历中显示任何内容。

我做错了什么？为什么没有显示事件？

这是我的 eventsData 数组的控制台日志。

这是我的代码：

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import BootstrapTheme from "@fullcalendar/bootstrap";
import firebase from '../../firebase';

const Calender = props => {

 const [eventsData, setEventsData] = useState({})

 const getEventsData = async () => { 
    await firebase.firestore().collection("Events").get().then((snapshot) => {
      const events = snapshot.docs.map(event => event.data());
      setEventsData(events)
      console.log(events)
    }).catch((e) => {
      console.log(e + "fetching error")
    })
  }

 useEffect(() => {
    getEventsData()
  },[])


       return(

                   <FullCalendar
                        plugins={[
                          BootstrapTheme,
                          dayGridPlugin,
                          interactionPlugin,
                        ]}
                        slotDuration={"00:15:00"}
                        handleWindowResize={true}
                        themeSystem="bootstrap"
                        headerToolbar={{
                          left: "prev,next today",
                          center: "title",
                          right: "dayGridMonth,dayGridWeek,dayGridDay",
                        }}
                        events={eventsData}
                        editable={true}
                        droppable={true}
                        selectable={true}
                   
                      />

              )
            }

【问题讨论】：

请以文字形式提供所有数据，而不是图片。数据的 JSON 表示将是最好的。谢谢
无论如何，由于请求是异步的，它可能会在从 firebase 填充事件数据之前尝试将事件数据传递给 fullcalendar。更喜欢使用 fullcalendar 文档中显示的回调函数模式在 fullcalendar 中实现动态事件提要
@ADyson 你是对的，异步/等待是问题所在。非常感谢！
@OsamaJamal 很好地找到了您自己问题的解决方案。只要有能力，请尝试将您的答案作为正式答案发布，以帮助遇到类似问题的其他用户
@OsamaJamal 你能发布这个问题的答案吗？谢谢！

标签： javascript reactjs firebase google-cloud-firestore fullcalendar

【解决方案1】：

我的代码的问题是我正在使用异步函数来获取我的数据，而这并没有显示数据。删除 async/await 解决了这个问题。

const getEventsData = () => { 
    firebase.firestore().collection("Events").get().then((snapshot) => {
      const events = snapshot.docs.map(event => event.data());
      setEventsData(events)
      console.log(events)
    }).catch((e) => {
      console.log(e + "fetching error")
    })
  }

【讨论】：