Estoy desarrollando una aplicación de red social y estoy tratando de cargar los comentarios debajo de cada publicación. Intenté usar funciones asíncronas y el gancho useEffect pero no funciona. Aquí está el código que he probado
const [comments, setComments] = useState([]); // get all comments for the current post const getComments = () => { async (dispatch) => { try { await db.collection('posts') .doc(postId) .collection('comments') .orderBy('timestamp', 'desc').onSnapshot(snapshot => { setComments(snapshot.docs.map(doc => doc.data())); console.log('Comments', snapshot.docs.map(doc => doc.data())); } ) } catch (error) { console.log(error); } } } // load the current user, post ID and comments upon opening the screen useEffect(() => { getComments(); getUser(); getPostId(); }, []);Los comentarios se cargan en la consola pero no se muestran a menos que actualice la página mientras estoy en ella. Los estoy mostrando así:
<View> {comments.map((comments, index) => ( <Comment comment={comments} key={index} /> ))} </View>necesita llamar a la función asíncrona dentro de getComments
const getComments = () => { (async (dispatch) => { try { await db.collection('posts') .doc(postId) .collection('comments') .orderBy('timestamp', 'desc').onSnapshot(snapshot => { setComments(snapshot.docs.map(doc => doc.data())); console.log('Comments', snapshot.docs.map(doc => doc.data())); } ) } catch (error) { console.log(error); } })() }o también puede eliminar la función dentro de getComments y cambiar la función getComments a asíncrona
const getComments = async (dispatch) => { try { await db.collection('posts') .doc(postId) .collection('comments') .orderBy('timestamp', 'desc').onSnapshot(snapshot => { setComments(snapshot.docs.map(doc => doc.data())); console.log('Comments', snapshot.docs.map(doc => doc.data())); } ) } catch (error) { console.log(error); } }