React+NextJS项目中Pusher每次请求返回多条响应触发重复API调用问题求助

问题原因 #

你的问题根因出在useEffect的用法上：

• 当前你写的useEffect没有传入依赖数组，这会导致组件每完成一次重新渲染，这个useEffect回调就会执行一次
• 每次useEffect执行都会新建一个Pusher实例、重新订阅频道、绑定新的消息触发回调，而旧的Pusher连接和绑定的回调没有被销毁清理
• 每次Pusher收到消息时，历史所有绑定的回调都会同时触发，自然会出现第N次收到消息就调用N次API的问题，同时也会生成大量多余的Pusher连接和消息记录。

修复方案 #

你需要做两处调整：

1. 给useEffect添加空的依赖数组[]，保证逻辑只在组件首次挂载时执行一次
2. 添加useEffect的清理函数，在组件卸载时取消频道订阅、断开Pusher连接，避免内存泄漏

修复后的代码如下：

useEffect(() => {
    //Pusher.logToConsole = true;
    var pusher = new Pusher("pusherID", {
      cluster: "eu",
    });
    const channel = pusher.subscribe("pusher-channel");
    const handlePusherMessage = function (data) {
      console.log(data);
      mutate("data");
    };
    channel.bind("", handlePusherMessage);

    // 清理函数
    return () => {
      channel.unbind("", handlePusherMessage);
      pusher.unsubscribe("pusher-channel");
      pusher.disconnect();
    };
}, []); // 空依赖数组保证仅执行一次

内容的提问来源于stack exchange，提问作者Floky99