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
  });
}, []);