Menjalankan semula useEffect: Garis panduan selepas menyerahkan fungsi

Question

Hello semua! Dalam projek saya, saya melaksanakan fungsi dalam useeffect yang mendapat data, tetapi apabila saya menambah elemen baru pada firestore, saya mahu useEffect dijalankan semula supaya senarai itu mengandungi elemen baharu, bolehkah seseorang tolong berikan Adakah saya mempunyai beberapa cadangan?

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

    
  }

Saya mahu apabila saya menjalankan submitHandler, useeffect berjalan semula jadi senarai akan dikemas kini

Answer 1

Menurut pengalaman saya, cara terbaik untuk mencapai perkara yang anda mahu lakukan ialah mengembalikan perbezaan pada bahagian belakang untuk permintaan yang mengubah suai data, dan kemudian mengubah suai keadaan anda dengan sewajarnya:

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

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

Dengan cara ini anda tidak perlu membuat banyak permintaan untuk kebanyakan data yang sama dalam sesi yang sama.

Sudah tentu, pendekatan ini tidak sesuai jika berbilang pelanggan/pengguna boleh mengubah suai data hujung belakang anda atau jika anda tidak mempunyai kawalan ke atas kandungan respons titik akhir.

Semoga membantu.

Answer 2

Satu-satunya cara untuk mendapatkan useEffectcangkuk berfungsi semula ialah menukar sesuatu dalam tatasusunan kebergantungan, atau tidak menyediakan tatasusunan langsung, dan memaparkan semula komponen dengan menukar prop atau keadaan. Sila rujuk dokumentasi useEffect

Anda boleh hubungi addDoc之后直接调用fetchTodos:

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

  return fetchTodos();
  
}