重新運行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();
  
}