Firebase Firestore集合切换后表格不更新问题求助（附代码）

问题原因 #

你的useEffect依赖数组是空的[]，这意味着这个副作用只会在组件首次挂载时执行一次。当你切换下拉框改变course的值时，useEffect不会重新运行，因此始终监听的是初始的那个集合，表格数据自然不会更新。

修复方案 #

把course添加到useEffect的依赖数组中，这样每当course的值发生变化时，useEffect就会重新执行：取消之前的集合监听，然后建立新的对应集合的快照监听，从而更新表格数据。

修改后的代码：

useEffect(() => {
  const unsub = onSnapshot(
    collection(db, 'Teachers/year/' + course),
    (snapShot) => {
      let list = [];
      snapShot.docs.forEach((doc) => {
        list.push({
          id: doc.id,
          ...doc.data()
        });
      });
      setData(list);
    },
    (error) => {
      console.log(error);
    }
  );

  return () => {
    unsub();
  };
}, [course]) // 这里添加course作为依赖

额外注意事项 #

• 确保course是通过useState声明的状态变量，比如：const [course, setCourse] = useState('A')，这样下拉框选择时调用setCourse修改值，才能触发组件重新渲染和useEffect的重新执行。
• 每次course变化时，之前的unsub()会被调用，自动取消旧的监听，避免内存泄漏和重复监听的问题。

内容的提问来源于stack exchange，提问作者Hinata-kun