如何在提交Firestore数据后重新触发React的useEffect钩子？

你可以通过以下几种方式实现添加新元素后自动更新列表：

方法1：提交后直接调用fetchTodos #

这是最直接的实现方式，在submitHandler完成Firestore添加操作后，立刻调用fetchTodos重新获取最新数据：

const submitHandler = async (todo) => {
    await addDoc(collection(db, session.user.uid), {
      todo,
      createdAt: serverTimestamp(),
      type: "active",
    });
    // 数据添加完成后重新拉取列表
    fetchTodos();
  }

方法2：新增触发刷新的状态依赖 #

添加一个状态变量作为useEffect的依赖项，在提交操作完成后更新这个状态，从而触发useEffect重新执行并拉取数据：

import { useState, useEffect } from 'react';

// 新增用于触发刷新的状态
const [refreshTrigger, setRefreshTrigger] = useState(0);

useEffect(() => {
    if (session) {
      fetchTodos();
    }
  }, [session, refreshTrigger]); // 将refreshTrigger加入依赖数组

const submitHandler = async (todo) => {
    await addDoc(collection(db, session.user.uid), {
      todo,
      createdAt: serverTimestamp(),
      type: "active",
    });
    // 更新状态值，只要值发生变化就会触发useEffect
    setRefreshTrigger(prev => prev + 1);
  }

方法3：使用Firestore实时监听（推荐） #

Firestore提供的onSnapshotAPI可以实时监听集合的数据变化，无需手动触发刷新，数据新增、修改或删除时会自动同步到前端：

useEffect(() => {
    if (!session) return;

    const collectionRef = collection(db, session.user.uid);
    // 开启实时监听
    const unsubscribe = onSnapshot(collectionRef, (querySnapshot) => {
      const fetchedtodos = [];
      querySnapshot.forEach((doc) => {
        fetchedtodos.push({ id: doc.id, data: doc.data() });
      });
      setTodos(fetchedtodos);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, [session]);

// 此时submitHandler无需额外操作，数据会自动更新
const submitHandler = async (todo) => {
    await addDoc(collection(db, session.user.uid), {
      todo,
      createdAt: serverTimestamp(),
      type: "active",
    });
  }

这种方式更高效，能实时响应Firestore的所有数据变更，还能避免重复调用getDocs带来的额外请求开销。

内容的提问来源于stack exchange，提问作者szunyi