Javascript EventSource陷入待定状态

Question

我正在使用服务器发送事件和Javascript EventSource API来运行实时React仪表板，并且我有多个选项卡，每个选项卡都使用一个EventSource。当我在不同的选项卡之间导航时，事件流像下面屏幕快照中的最后一个“实时”流那样停留在待处理状态：

因此，数据未加载到React仪表板中并在加载时卡住。尽管我关闭了流，但我可以看到它们是较早打开的：

  const [data, setData] = useState(undefined);

  const reportDataEventSource = new EventSource(
    "http://localhost:8080/report/heatMap/live"
  );

  useEffect(() => {
    reportDataEventSource.onmessage = e => {
      setData(JSON.parse(e.data));
    };

    return () => reportDataEventSource.close()
  }, []);

这可能是什么原因，我该如何解决？