处理未读消息，ReactJS 和 Firebase答案

【问题标题】：Handling unread messages, ReactJS & Firebase处理未读消息，ReactJS 和 Firebase
【发布时间】：2022-12-05 22:46:55
【问题描述】：

我正在尝试使用 FireStore 和 ReactJS 制作实时聊天应用程序，但我正在努力处理未读消息计数（Chat.js 组件）。 *忽略第 34 行的 useEffect 那是行不通的，当我放置消息时。？作为依赖项的长度我得到了想要的结果，但是当我将该数字作为道具传递给聊天头时，事情变得一团糟。另外，每个建议都会很好，因为我是初学者。谢谢！高：https://github.com/mxmxmarexmxm/ChatFlix/tree/main/src/components 直播：https://mxmxmarexmxm.github.io/ChatFlix

我试图在网上找到解决方案，但几个小时后我仍然做不到。

【问题讨论】：

"求调试帮助的问题('为什么这段代码不起作用？') 必须包括所需的行为，一个具体问题或错误和必要的最短代码重现它在问题本身.没有的问题明确的问题陈述对其他读者没有用。见：How to create a Minimal, Complete, and Verifiable example.”

标签： reactjs firebase

【解决方案1】：

因此，您需要根据组件中消息数组的长度更新未读消息计数，但该值不会随着新消息的到来而实时更新。在组件中使用 useEffect 钩子，并将消息数组作为依赖项传递给钩子。

useEffect(() => {
  // Update the unread messages count based on the current length of the messages array
  setUnreadMessagesCount(messages.length);
}, [messages]);

【讨论】：