Estoy creando una aplicación usando react-native y react-native-firebase y me encuentro con un problema al intentar implementar una sección de comentarios.
Mi árbol de datos actualmente es así: colección (comentarios)/doc (usuario actual.uid)/colección (comentarios de usuario)/doc (ID de creador de comentarios)
Dentro de este documento commentCreatorID hay todos los datos que necesito. Así que básicamente el contenido, una marca de tiempo...
Para esta parte, todo funciona perfectamente, pero para que la información del creador del comentario se mantenga en su publicación, necesito obtenerla en otro lugar. La forma en que lo hago es tomar el doc (commentCreatorID), ya que es el uid de este usuario y pedirle a firestore que me proporcione los datos del documento con esta misma identificación dentro de mi colección de "usuarios".
Aquí está mi código:
const [comments, setComments] = useState([]) const [commentsReady, setCommentsReady] = useState([]) useEffect(() => { setComments([]) setLoading(true) firestore() .collection('comments') .doc(auth().currentUser.uid) .collection('userComments') .get() .then((snapshot) => { let comments = snapshot.docs.map(doc => { const data = doc.data() const id = doc.id return {id, ...data} }) setComments(comments) }) .then(() => { comments.forEach(comment => { firestore() .collection("users") .doc(comment.id) .get() .then((snapshot) => { const data = snapshot.data() setCommentsReady({comments, ...data}) }) }) }) console.log(commentsReady) setLoading(false) }, [handleScroll4])Esto no parece funcionar tan bien como por ahora. Mi registro arroja una matriz vacía directamente en mi cara. Estoy tomando cada comentario correctamente aunque e incluso los datos de cada usuario correspondientes a sus uid. Puedo registrarlos una vez que se haya hecho ForEach. Pero por alguna razón no puedo configurarlos en mis comentarios de estado Listo.
Me he perdido algo ?
Gracias por tu tiempo
Los configuradores que devuelve la función useState son asíncronos. Copiar datos de un estado a otro también es un antipatrón. Intenta usar efectos.
const TT = () => { const [comments, setComments] = useState([]); const [userInfos, setUserInfos] = useState([]); const commentsView = comments.map(comment => { // Reactively merge each comment with the appropriate user info }); useEffect(() => { firestore() .collection('comments') .doc(auth().currentUser.uid) .collection('userComments') .get() .then((snapshot) => { let comments = snapshot.docs.map(doc => { const data = doc.data() const id = doc.id return {id, ...data} }); setComments(comments); }); }, []); useEffect(async () => { // Maybe keep a cache of fetched user datas, but not sure how this is architected const snapshots = await Promise.all(comments.map(comment => { return firestore() .collection("users") .doc(comment.id) .get(); })); setUserInfos(snapshots.map(snap => snap.data())); }, [comments]); };