Блог

Главная - Вопросы по программированию - Ошибка useEffect: Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect. Огневая база

Ошибка useEffect: Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect. Огневая база

# #reactjs #firebase #google-cloud-firestore #react-hooks #use-effect

Вопрос:

Я потратил некоторое время, чтобы прочитать несколько других решений, касающихся крючка useEffect, но я в этом новичок. Не мог бы кто-нибудь, пожалуйста, объяснить мне, как я отменяю подписку в своем крючке?

Я знаю, что должно быть возвращение, но я не совсем уверен, что я должен возвращать в этом случае… Дайте мне знать, если вам понадобится дополнительная информация! Заранее спасибо! Вот мой фрагмент кода:

     const userAppointments = firestore.collection("customers").doc(`${userData.userId}`)

    userAppointments.collection("appointments").where("serviceComplete", "==", true)
    .onSnapshot((querySnapshot) => {
      var appts = [];
      querySnapshot.forEach((doc) => {
          appts.push(doc.data());
        });
        setAppointments(appts)
    })
  }, [])```

Комментарии:

1. Эй, Фрэнк! Я знаю, что это очень поздно, но я сделал это, спасибо! Как только я получу достаточную репутацию, я объявлю об этом!

Ответ №1:

Если вы возвращаете функцию из useEffect , React вызовет эту функцию, когда компонент будет удален из дерева виджетов.

Поскольку Firestore onSnapshot возвращает именно такую отписку, вы можете просто вернуть ее после useEffect звонка:

   useEffect(() => {
    const userAppointments = firestore.collection("customers").doc(`${userData.userId}`)

    return userAppointments.collection("appointments").where("serviceComplete", "==", true)
    .onSnapshot((querySnapshot) => {
      var appts = [];
      querySnapshot.forEach((doc) => {
          appts.push(doc.data());
        });
        setAppointments(appts)
    })
  }, [])
Метки: ,