Maison > Questions et réponses > le corps du texte
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
P粉4550931232023-09-11 09:31:29
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.
P粉8785424592023-09-11 09:27:48
La seule façon de faire fonctionner à nouveau le useEffect
hook 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(); }