Réexécution de useEffect : lignes directrices après la soumission d'une fonction

Question

Bonjour à tous ! Dans mon projet, j'exécute une fonction dans useeffect qui récupère les données, mais lorsque j'ajoute un nouvel élément au Firestore, je souhaite que useEffect s'exécute à nouveau afin que la liste contienne le nouvel élément. Quelqu'un peut-il s'il vous plaît donner. Ai-je quelques suggestions ?

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

    
  }

Je veux que lorsque j'exécute submitHandler, useeffect s'exécute à nouveau pour que la liste soit à jour

Answer 1

D'après mon expérience, la meilleure façon d'accomplir ce que vous voulez faire est de renvoyer le diff sur le backend pour les requêtes qui modifient les données, puis de modifier votre état en conséquence :

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

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

De cette façon, vous n’avez pas besoin de faire beaucoup de requêtes pour une grande partie des mêmes données au cours de la même session.

Bien sûr, cette approche n'est pas idéale si plusieurs clients/utilisateurs peuvent modifier vos données backend, ou si vous n'avez aucun contrôle sur le contenu de la réponse du point de terminaison.

J'espère que cela aide.

Answer 2

La seule façon de faire fonctionner à nouveau le useEffecthook est de modifier quelque chose dans le tableau de dépendances, ou de ne pas fournir de tableau du tout, et de restituer le composant en changeant les accessoires ou l'état. Veuillez vous référer à la documentation useEffect

Vous pouvez appeler addDoc之后直接调用fetchTodos :

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

  return fetchTodos();
  
}