重新运行useEffect：提交函数后的操作指南

Question

大家好！在我的项目中，我在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再次运行，这样列表就会是最新的

Answer 1

根据我的经验，完成你想要做的事情的最佳方法是在后端对修改数据的请求返回差异，然后相应地修改你的状态：

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

    setTodos((prev) => [...prev, data]);
};

这样，你就不必在同一会话中为大部分相同的数据进行大量请求。

当然，如果多个客户端/用户可以修改你的后端数据，或者你无法控制端点的响应内容，这种方法并不理想。

希望对你有所帮助。

Answer 2

要让useEffect钩子再次运行，唯一的方法是在依赖数组中更改某些内容，或者根本不提供数组，并通过更改props或state来重新渲染组件。请参阅useEffect文档

您可以在调用addDoc之后直接调用fetchTodos：

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

  return fetchTodos();
  
}