使用 Firebase onSnapshot 在不刷新的情况下使用新添加的事件填充 React-Big-Calendar答案

【问题标题】：Populating React-Big-Calendar with newly added events without refreshing using Firebase onSnapshot使用 Firebase onSnapshot 在不刷新的情况下使用新添加的事件填充 React-Big-Calendar
【发布时间】：2020-10-13 16:24:21
【问题描述】：

我目前正在尝试让 React-Big-Calendar 实时填充新添加的事件。我正在使用下面的代码，它完成了这项工作。事件将在创建/修改/删除后立即添加到日历中。但是，即使我没有从日历中添加或删除事件，它也会执行读取。在离开日历运行的 5 分钟内，我将超过我每天从 Firestore 读取 50k 的限制。 我是否使用了正确的方法？我的目标是在添加/修改/删除新事件时更新日历而不刷新。 有没有办法只在发生更改/更新时更新日历？ 当我console.log(snapshot.docChanges()) 时，它返回数据并且所有类型都是added，无论它们是否是旧数据，因为它们最近没有添加。 这正常吗？

另外，我不太确定如何以及何时使用unsubscribe() 函数。 我应该什么时候调用它？如果我错了，请纠正我，但现在，通过在最后返回 unsubscribe()，它的行为应该类似于 componentWillUnmount。

//events are used in calendar
const [events, setEvents] = useState([] as CalendarEvent[]);

//onSnapshot to check for real-time updates
useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collectionGroup("bookings")
      .where("orgId", "==", props.orgId ? props.orgId : null)
      .onSnapshot((snapshot) => {
        const bookedEvents: any = [];
        snapshot.forEach((doc) => bookedEvents.push({ ...doc.doc.data() }));

//creates an eventlist so the calendar can call individual events
        const eventList = bookedEvents.map((event: any) => {
          return {
            title: event.title,
            start: new Date(
              moment(event.time.startTime * 1000).format("YYYY-MM-DD HH:mm:ss")
            ),
            end: new Date(
              moment(event.time.endTime * 1000).format("YYYY-MM-DD HH:mm:ss")
            ),
            eventId: event.eventId,
            name: event.participants.name,
            email: event.participants.email,
            phoneNumber: event.phoneNumber,
            itemQuantity: event.itemQuantity,
            memberBookingType: event.memberBookingType,
          };
        });

//sets the eventlist as events for calendar
        setEvents(eventList as CalendarEvent[]);
      });

//componentWillUnmount unsubscribe();
    return () => {
      unsubscribe();
    };
  });

【问题讨论】：

标签： reactjs firebase google-cloud-firestore react-big-calendar

【解决方案1】：

您的useEffect 上没有定义依赖列表，因此它可能会在每次重新渲染组件时重新运行。而且，因为它每次运行时都会进行“第一次”调用......

您只希望它在挂载时订阅，并在卸载时取消订阅。通过提供一个空的依赖数组，React hooks 文档提供了非常清晰的示例。

useEffect(() => {
  const unsubscribe = subscribe(); // paraphrasing here
  return () => {
    unsubscribe();
  };
}, []};

如果订阅在每次发生更改时都返回所有事件，那么使用完整数组调用 setEvents 将重新呈现每个事件，而不仅仅是已更改的事件。这可能是你想要的。

此外，您还可以在 .map() 中使用解构来简化代码。

const eventList = bookedEvents.map((event: any) => {
  const {time: {startTime, endTime}, ...thisEvent} = event;
  return {
    ...thisEvent,
    start: new Date(
      moment(startTime * 1000).format("YYYY-MM-DD HH:mm:ss")
    ),
    end: new Date(
      moment(endTime * 1000).format("YYYY-MM-DD HH:mm:ss")
    ),
  };
});

【讨论】：