cuando termino de obtener datos de mi base de datos y uso State setValue y paso la matriz, la función de renderizado no vuelve a renderizarse.
Código donde configuroArray
function getNotifiche(){ onSnapshot(collection(db, "Users",auth.currentUser.uid, "Notifiche"), async (snapNotifiche) => { const notifichee = []; snapNotifiche.forEach(async notificaDoc => { const docRef = doc(db,"Users",notificaDoc.data().Invitato); const userData = await getDoc(docRef); notifichee.push({ "data":notificaDoc.data(), "invitante":userData.data() }) }); setListaNotifiche(notifichee); });Esto está en la función de retorno:
{ (listaNotifiche.map((notifica,index)=>{ return(<div key={index}> <label>Invitato da {notifica.invitante.Username} in data{new Date(notifica.data.DataInvito.seconds * 1000).toString()}</label> <button>Partecipa</button> <button>Elimina</button> </div>); })) }Así que también intenté usar setListaNotifiche([...notifichee]) pero aparece el error: TypeError: Cannot read properties of undefined (reading 'map')
.forEach no sabe nada sobre promesas o funciones asíncronas. Para cuando finaliza .forEach , notifichee sigue siendo una matriz vacía, y luego establece el estado con una matriz vacía. Algún tiempo después, la matriz se mutará para tener datos, pero eso sucede después de que se procesa el componente.
En su lugar, deberá esperar a que finalicen las promesas antes de crear la matriz y establecer el estado. Puede usar .map para crear una matriz de promesas, luego Promise.all para combinarlas en una sola promesa y luego esperar esa promesa para obtener la matriz de datos:
onSnapshot( collection(db, "Users", auth.currentUser.uid, "Notifiche"), async (snapNotifiche) => { const promises = snapNotifiche.docs.map(async (notificaDoc) => { const docRef = doc(db, "Users", notificaDoc.data().Invitato); const userData = await getDoc(docRef); return { data: notificaDoc.data(), invitante: userData.data(), } }) const notifichee = await Promise.all(promises); setListaNotifiche(notifichee); } );