带有回调的 Nextjs 侦听器自行执行

Question

我一直在为我的 nextjs 应用开发一个实时通知系统。它运行良好，我在每一页中都这样称呼它：


export default function Bot({user}) {

    startNotifications(user)
}

函数本身看起来像这样

    const userID = getUserID(user)
    const pubnub = new PubNub({
        subscribeKey: subKey,
        uuid: userID
    });

    const { asPath } = useRouter()
    pubnub.unsubscribeAll();
    pubnub.addListener({
        signal: function(signal) {
            const message = signal.message
            if (message[0] == "bot") {
                Notiflix.Notify.Info(notificationMessage);

                if (check if url is correct here) {
                    callback()
                    return
                }

            }

        }
    })

    pubnub.subscribe({
        channels: ["announcements", userID.toString()],
    });

但是当我尝试添加回调函数来更改状态时，取决于这样的通知：

export default function Bot({user}) {

    startNotifications(user, changeState)


    const [value, setValue] = useState(true)

    function changeState(){
      console.log("changing state")
  
      setValue(false)
    }
}

代码工作正常，状态正在改变，但出于某种原因，代码自身循环并使每个通知的侦听器数量加倍。在 startNotifications 函数中，我什至尝试取消订阅并重新订阅，但这也不起作用。看起来像这样（第一次通知）

然后如果我再做几次 4。通知看起来像这样：

我几乎已经尝试完了。我试图在同一个文件中实现 startNotifications，但效果相同。

如果有人对此有解决方案（这可能是非常明显但我不知道的），请告诉我。祝你有美好的一天。

Answer 1

您缺少的一件事是将整个 startNotifications 放在 useEffect 钩子中。没有它，所有这些代码都会在每次组件重新呈现时执行。

export default function Bot({user}) {
    useEffect(() => startNotifications(user), []);
    
    // rest of the code
}

带有回调的 Nextjs 侦听器自行执行

Nextjs Listener with callback executes itself

notifications

pubnub

reactjs

next.js