使用 firebase 和 react js 计算未读消息

Question

我正在使用 next js 构建网络聊天应用程序，firebase.How 我可以实现未读消息计数器吗？我在消息文档中使用名为 read 的布尔字段来检查消息是否已读。

我尝试使用 useEffect，但我的计数器似乎只是不停地增加。

const [notification,SetNotification]=useState(0)
const[messages,SetMessages]=useState([])

useEffect(()=>{
const getMessages=async ()=>{
    const data=await getDocs(lastMessageRef)
    SetMessages(data.docs.map((doc)=>({...doc.data(), id:doc.id})))
    
};
getMessages();
messages.forEach((message)=>{
    if(message.read==false){
        SetNotification(notification+1)
    }
})
},[messages])
console.log(notification)

Answer 1

将您的代码拆分为两个单独的 useEffect。此外，在循环中使用 SetNotifaction 会导致很多问题。我建议改用 Array.filter。

const [notification,SetNotification] = useState(0)
const [messages,SetMessages] = useState([])

useEffect(() => {
  const getMessages = async () => {
    const data = await getDocs(lastMessageRef)
    SetMessages(data.docs.map((doc) => ({...doc.data(), id:doc.id}))) 
  };
  getMessages();
}, [messages]);

useEffect(() => {
  const unreadMessages = messages.filter(message => message.read === false)
  
  SetNotification(unreadMessages.length)

}, [messages]);

使用 firebase 和 react js 计算未读消息

Count unread messages using firebase and react js

firebase

reactjs

next.js

google-cloud-firestore