GetStream Chat未读消息计数徽章状态更新异常问题求助

各位大佬好！我正在给我们的网站集成GetStream的聊天功能，想实现一个类似FB、Twitter、Instagram那样的未读消息计数徽章，但状态更新的逻辑出了问题，实在摸不着头脑，麻烦各位帮忙看看哪里错了！

目前的情况是：GetStream的事件监听器确实能工作，但状态更新非常不稳定：

• 用户收到新消息时，徽章和计数能正常显示，但只要切换到非聊天窗口的其他页面，计数就消失了；刷新页面后计数又会回来，之后再切换页面计数能保持住。
• 但如果收到第二条消息，计数会更新成2，可切换页面后又变回1，必须刷新页面才会显示正确的2。
• 另外，进入聊天页面后计数应该重置为0，但现在完全不会，只有刷新页面才会归0。

我感觉肯定是状态更新的逻辑没写对，现在这段逻辑是写成了自定义Hook，也可以移到组件里去，下面是我的代码：

const useUnreadMessagesCount = () => {

  const { user } = useAuth()
  const { client: chatClient } = useChatContext()
  const [unreadCount, setUnreadCount] = useState<any>()
  const { token } = useStreamToken()

  useEffect(() => {
    async function init() {
      // 初始化状态，因为看起来client.on事件只在新事件触发时执行
      if (user != null) {
        const response: any = await chatClient.connectUser({ id: user.uid }, token)
        setUnreadCount(response.me.total_unread_count)
      }

      // 新事件触发时更新状态
      chatClient.on((event) => {
        console.log("HERE")
        if (event.unread_channels !== undefined) {
          console.log("COUNT: ", event.total_unread_count)
          setUnreadCount(event.total_unread_count)
        }
      })
    }

    init()

    // @ts-ignore
    chatClient.on("user.presence.changed", init())

    return () => {
      // @ts-ignore
      chatClient.off("user.presence.changed", init())
    }
  }, [chatClient])

  return unreadCount
}

export default useUnreadMessagesCount

有没有大佬能帮我找出问题所在呀？跪谢！

备注：内容来源于stack exchange，提问作者Thomas Lester