使用 Firebase 快照对异步操作进行 React useEffect 链接答案

【问题标题】：React useEffect chaining for async actions with firebase snapshot使用 Firebase 快照对异步操作进行 React useEffect 链接
【发布时间】：2021-05-07 16:35:31
【问题描述】：

它是什么：使用 Firebase 的一对一聊天如何完成：我们在 Firebase Firestore 中有“chatIds”列和“messages”列，在您在第一次 useEffect 中查询“chatIds”后，您可以使用从那里返回的 id 列表来检索“messages”并映射他们。问题：似乎第二个 useEffect 不会在每次 ,,chatIds” 更改以重新渲染组件后触发，我无法实现 ,, 一对一聊天”体验。

非常感谢

import React, {useState} from "react"

const Child = ({ user }) => {
 
 const [idChat, setIdChat] = useState(null)
 const [meessages, setMessages] = useState(null) 

 useEffect( ()=> {
   db.doc().get().then( value => setIdChat(value) ) // async action: some value received after 
                                                    // querying Firebase DB 
   
 }, [user]}  

 useEffect( ()=> {
   const docMessages = [];
   idChat.messages.map( message => {
      db.doc(`message/${message.id}`).get().then( res => docMessages.push(res.data()))
   })
   setMessages(docMessages)
 }, [idChat]}
  
 return{
     <div>{messages.map( m => <div>{m.sender}:{m.text}</div>)}</div>
 }
}

exoport default Child

【问题讨论】：

标签： reactjs firebase google-cloud-firestore react-hooks

【解决方案1】：

setMessages(docMessages) 函数在消息解析之前运行。您需要先解析消息，然后更新状态：

   const messages =  idChat.messages.map(async message => (await db.doc(`message/${message.id}`).get()).data());
   setMessages(messages);

【讨论】：

【解决方案2】：

向useEffect Hook 添加条件。它允许在idChat 不是null 时运行代码，并防止在第一次渲染时运行它：

 useEffect(()=> {

    if(idChat){

        const docMessages = [];

        idChat.messages.map( message => {
            db.doc(`message/${message.id}`).get().then(res => docMessages.push(res.data()));
        });

        setMessages(docMessages);

    }

 }, [idChat]);

注意：注意useEffect Hook 末尾的括号。它应该是一个括号。

【讨论】：