Как перевести componentDidMound и componentWillUnmount в UseEffect (React Hooks) с помощью Firebase / Firestore?

Question

Как можно go использовать хук useEffect для замены и componentDidMount, и componentWillUnmount при работе с Firebase? Я не могу найти решение этой функции «отписаться».

unsubscribe = null;

componentDidMount = async () => {
  this.unsubscribe = firestore.collection('posts').onSnapshot(snapshot => {
    const posts = snapshot.docs.map(...)
    this.setState({ posts })
  })
}

componentWillUnmount = () => {
  this.unsubscribe()
}

Вот что я попробовал:

useEffect(() => {
  async function getSnapshot() {
  const unsubscribe = firestore.collection('posts').onSnapshot(snapshot => {
        const posts = snapshot.docs.map(...)
        setPosts(posts)
  }
  getSnapshot()
  //return something to clear it? I don't have access to 'unsubscribe'
}, [])

Answer 1

Вы на самом деле очень близки с вашим ответом. Вы не использовали await в своей функции, поэтому не было смысла использовать его.

useEffect(() => {
  const unsubscribe = firestore.collection('posts').onSnapshot((snapshot) => {
    const posts = snapshot.docs.map(...)
    setPosts(posts);
  });
  return () => {
    unsubscribe();
  };
}, []);

Если вам нужно было использовать asyn c, вы можете просто использовать замыкание, чтобы отписаться от рассылки. функция asyn c.

useEffect(() => {
  let unsubscribe;
  async function getSnapshot() {
    unsubscribe = firestore.collection('posts').onSnapshot((snapshot) => {
      const posts = snapshot.docs.map(...)
      setPosts(posts);
    });
  }
  getSnapshot();
  return () => {
    unsubscribe();
  };
}, []);

Answer 2

вы, вероятно, столкнетесь с проблемами при использовании asyn c внутри useEffect, посмотрите https://www.npmjs.com/package/use-async-effect

useAsyncEffect( async() => {
   const unsubscribe = await firestore.collection('posts').onSnapshot(snapshot => {
       const posts = snapshot.docs.map(...)
       setPosts(posts)
    }
    return () => {
      console.log("unmount")
      unsubscribe()
    };
}, [])

РЕДАКТИРОВАТЬ: на самом деле из документов вы там вообще не нужен asyn c: вы пробовали этот формат?

  useEffect(
    () => {
      const unsubscribe = firebase
        .firestore()
        .collection('recipes')
        .doc(id)
        .collection('ingredients')
        .onSnapshot( snapshot => { const ingredients = [] snapshot.forEach(doc => { ingredients.push(doc) }) setLoading(false) setIngredients(ingredients) }, err => { setError(err) } )

      return () => unsubscribe()
    },
    [id]
  )