UseEffect erneut ausführen: Richtlinien nach dem Absenden einer Funktion

Question

Hallo zusammen! In meinem Projekt führe ich eine Funktion in useeffect aus, die die Daten abruft, aber wenn ich dem Firestore ein neues Element hinzufüge, möchte ich, dass useEffect erneut ausgeführt wird, damit die Liste das neue Element enthält. Kann mir bitte jemand etwas geben? Habe ich einige Vorschläge?

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",
    });

    
  }

Ich möchte, dass useeffect erneut ausgeführt wird, wenn ich „submitHandler“ ausführe, damit die Liste auf dem neuesten Stand ist

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();
  
}