React、NextJS、Pusher 为每个请求返回多个响应

Question

我一直在尝试让我的应用程序在每次收到 Pusher 响应时都获取新数据，但现在的问题是对于每个新响应，响应计数似乎都增加了 1，因此 fetch 调用... 例如，当我收到 Pusher 响应时第一次请求新数据时，我调用了 API 1 次，第二次我收到 2 个 Pusher 响应，然后是 3 次，依此类推，这大大降低了我的性能... 任何人都可以向我解释一下似乎是什么问题吗？

useEffect(() => {
    //Pusher.logToConsole = true;
    var pusher = new Pusher("pusherID", {
      cluster: "eu",
    });
    const channel = pusher.subscribe("pusher-channel");
    channel.bind("", function (data) {
      console.log(data); //log pusher response so I know how many are received
      mutate("data"); //fetch data from API
    });
  });

如果我检查我的 Pusher 仪表板，我建立了很多连接并发送了很多消息，而我只使用一台设备来执行这些操作，所以这可能意味着这台设备连接了多次并发送了多条消息，这确实是不好...

Answer 1

如果您有一个订阅系统，您通常只想订阅一次，当您的组件准备就绪时，这通常发生在第一次 useEffect 调用时，保存对服务的引用始终是个好主意您正在调用组件的顶层（在 state 或 ref 对象内）。

您的问题是您的 useEffect 没有任何依赖性，所以它基本上在每次您的组件重新呈现时运行。如果你放置空的依赖数组，这可以解决你的问题。

useEffect(() => {
  const pusher = new Pusher("pusherID", {
    cluster: "eu",
  });
  const channel = pusher.subscribe("pusher-channel");
  channel.bind("", function (data) {
    mutate("data"); //fetch data from API
  });
}, []);

React、NextJS、Pusher 为每个请求返回多个响应

React, NextJS, Pusher multiple responses returned for every request

pusher

reactjs

next.js