在内部使用异步函数时如何清理 useEffect 钩子

Question

我有一个 useEffect 钩子，我在其中创建了一个 Firebase RTDB 侦听器。我用来在钩子中创建异步的函数称为 fetchData。

当组件卸载时，我必须以某种方式删除侦听器。我试图在钩子返回函数中实现它，但我不知道如何正确地实现它。

我也尝试从 fetchData 返回 ref 和 listener 以最终使用它作为回报，但它没有帮助。

你能帮我吗？

这是我的钩子片段：

  useEffect(() => {
    const fetchData = async () => {
      console.log('DIDMOUNT')
      const ref = await db.ref(url)
      const listener = ref.on('value', sn => {
        const val = sn.val()
        const fetched = []
        for (let id in val)
          fetched.push({ id, ...val[id] })
        setData(fetched)
      })
    }

    fetchData()

    return () => {
      console.log('UNMOUNT')
      ref.off('value', listener)
    }
  }, [user])