Next JS + Supabase 实时订阅订阅状态为“关闭”答案

【问题标题】：Next JS + Supabase real time subscription subscribes with state "closed"Next JS + Supabase 实时订阅订阅状态为“关闭”
【发布时间】：2022-07-22 04:19:41
【问题描述】：

我正在为一个使用 Next JS 和 Supabase 的学校项目开发这个帮助台，但在操作员和客户之间的实时聊天中遇到了困难。

我在useEffect hook中订阅了表，并返回unsubscribe函数进行清理。

但是当我换票时，有时订阅已经建立，但状态已经关闭，这会导致订阅停止发送回调。

我认为问题可能在于新订阅在清理功能之后（甚至可能在期间）被调用，这甚至导致新订阅被关闭。但我不确定如何解决这个问题。

有什么想法吗？这是使用的 useEffect：

useEffect(() => {
    getMessages(id)

    const MessageSubscription = supabase
        .from<definitions['messages']>('messages')
        .on('INSERT', (message) => {
            getMessages(id)
        })
        .subscribe()

    async function removeMessageSubscription() {
        await supabase.removeSubscription(MessageSubscription)
    }
    return () => {
        removeMessageSubscription()
    }
}, [])

【问题讨论】：

标签： reactjs next.js use-effect supabase

【解决方案1】：

可能 useEffect 触发两次，它可能会发生一些实时事件的意外行为。

只需禁用严格模式，然后重试。

// next.config.js
module.exports = {
    reactStrictMode: false,
}

【讨论】：