Question

我正在尝试使用React中的useEffect钩子来侦听Firestore中某个位置的变化。

最初，我没有一个空数组作为useEffect方法中的第二个道具，并且我也没有退订onSnapshot侦听器。短暂延迟后，我在projects变量中收到了正确的数据。

但是，当我遇到极端的性能问题时，我添加了本应放在前面的退订和空数组。奇怪的是，现在没有数据返回，但是性能问题消失了。

是什么阻止变量更新以反映Firestore中的数据？

function useProjects(organisation) {
  const [projects, setProjects] = useState({
    docs: []
  });

  useEffect(() => {
    if (!organisation.docs[0]) return;
    const unsubscribe = firebase.firestore().collection('organisations').doc(organisation.docs[0].id).collection("projects").onSnapshot(snapshot => {
      setProjects(snapshot);
    });

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

  return projects
};

const projects = useProjects(organisation);

Answer 1

在useEffect挂钩的依赖项数组中需要一个值。我可能会建议您在useEffectHook中使用的值。否则，使用[]作为依赖项数组，效果将仅触发一次（在安装时），再也不会触发。依赖项数组的要点是告诉响应，只要依赖项发生更改，就重新运行该钩子。

以下是一个示例，我建议根据当前挂钩中的内容（使用您在呼叫中发送给firebase的ID）。我在这里使用可选链接，因为它使逻辑不太冗长。

function useProjects(organisation) {
  const [projects, setProjects] = useState({
    docs: []
  });

  useEffect(() => {
    if (!organisation.docs[0]) return;
    const unsubscribe = firebase.firestore().collection('organisations').doc(organisation.docs[0].id).collection("projects").onSnapshot(snapshot => {
      setProjects(snapshot);
    });

    return () => unsubscribe()
  }, [organization.docs[0]?.id]);

  return projects
};

React Hooks Firebase-useEffect挂钩不返回任何数据

1 个答案: