在 setState 到数组后 Reactjs 不会重新渲染

Question

当我完成从数据库中获取数据并使用状态 setValue 并传递数组时，渲染函数不会再次渲染。

我设置数组的代码

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);

});

这是在返回函数中：

 {         
        (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>);
        }))
    }

所以我也尝试使用 setListaNotifiche([...notifichee]) 但我收到错误：TypeError: Cannot read properties of undefined (reading 'map')

Answer 1

.forEach 对承诺或异步函数一无所知。当.forEach 完成时，notifichee 仍然是一个空数组，然后您使用一个空数组设置状态。一段时间后，数组将被修改为包含数据，但这是在组件渲染之后发生的。

相反，在创建数组和设置状态之前，您需要等待 Promise 完成。您可以使用.map 创建一个promise 数组，然后Promise.all 将它们组合成一个promise，然后等待该promise 获取数据数组：

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