如何在提交功能后重新运行 useEffect？答案

【问题标题】：How to re-run useEffect after a submit function?如何在提交功能后重新运行 useEffect？
【发布时间】：2023-02-15 00:41:50
【问题描述】：

大家好！所以在我的项目中，我在 useEffect 中执行了一个获取数据的功能，但是当我向 firestore 添加一个新元素时，我希望 useEffect 再次运行，以便在列表中包含添加的元素，有人可以给我建议我该如何做做吗？
useEffect(() => {
    if (session) {
      fetchTodos();
    }
  }, [session]);

  const fetchTodos = async () => {
    const fetchedtodos = [];

    const querySnapshot = await getDocs(collection(db, session.user.uid));

    querySnapshot.forEach((doc) => {
      return fetchedtodos.push({ id: doc.id, data: doc.data() });
    });

    setTodos(fetchedtodos);
  };

const submitHandler = async (todo) => {
    
    const data = await addDoc(collection(db, session.user.uid), {
      todo,
      createdAt: serverTimestamp(),
      type: "active",
    });

    
  }
我希望当我运行 submitHandler 时 useeffect 再次运行所以列表将是最新的

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

使 useEffect 钩子再次运行的唯一方法是更改依赖项数组中的某些内容，或者根本不提供数组，并让组件重新渲染（通过更改道具或状态）。

你可以在调用addDoc后直接调用fetchTodos：

const submitHandler = async (todo) => {
    
  const data = await addDoc(collection(db, session.user.uid), {
    todo,
    createdAt: serverTimestamp(),
    type: "active",
  });

  return fetchTodos();
  
}

【讨论】：

【解决方案2】：

你可以创建状态[shouldRefetch, setShouldRefetch] = useState(false)

您应该在提交时将其设置为 true 并将此状态添加到 useEffect 作为依赖项并将其设置回 false。因此，每当 shouldRefetch 更改时，useEffect 都会运行，您将获得更新的列表。

【讨论】：