Javascript 停止使用正在react应用程序中重新订阅的eventsource

我有一个简单的例子，包括一个服务器发送的事件服务器每5秒发送一次更新，以及一个react应用程序监听它。react应用程序似乎在每次调用

useEffect

时都会添加一个新的侦听器，同时保留旧的侦听器，这显然会使应用程序很快崩溃

我已经尝试添加一个监听状态变量，并且只在不监听的情况下执行subscribe，并且只在页面首次加载时触发

useffect

。在这些情况下，数据将停止正确更新

server.js App.js

import React，{useState，useffect}来自“React”；
导入“/App.css”；
函数App（）{
const[data，setData]=useState（[0]）
const[eventSource，setEventSource]=useState（新事件源（“http://127.0.0.1:5000/events"));
useffect（（）=>{
console.log（'render'）
eventSource.addEventListener（'scan'，event=>{
setData（[data[0]+1，…data]）；
});
}，[数据]；
返回(
{data}
);
}
导出默认应用程序；

事实证明，它比我最初认为的要复杂得多，所以我没有重新发明轮子，而是找到了这个包。解决方案如下所示：

import React, { useState, useEffect } from 'react';
import { useSSE, SSEProvider } from 'react-hooks-sse';

import './App.css';


const Component = () => {
  const state = useSSE('scan');
  const [data, setData] = useState([])

  useEffect(() =>{
    if (state) {
    setData([state.data.some.value ,...data]);
  }

}, [state])

return data
}

function App() {

  return (
    <SSEProvider endpoint="http://127.0.0.1:5000/events" >
        <Component />
    </SSEProvider>
);
}

export default App;

import React，{useState，useffect}来自“React”；
从'react hooks sse'导入{useSSE，SSEProvider}；
导入“/App.css”；
常量组件=（）=>{
const state=useSSE（'scan'）；
const[data，setData]=useState（[]）
useffect（（）=>{
如果（州）{
setData（[state.data.some.value，…data]）；
}
}，[国家]）
返回数据
}
函数App（）{
返回(
);
}
导出默认应用程序；

---

state

变量从技术上讲只是从服务器接收到的最新消息。

事实证明，它比我最初认为的要复杂得多，因此我没有重新发明轮子，而是找到了包。解决方案如下所示：

import React, { useState, useEffect } from 'react';
import { useSSE, SSEProvider } from 'react-hooks-sse';

import './App.css';


const Component = () => {
  const state = useSSE('scan');
  const [data, setData] = useState([])

  useEffect(() =>{
    if (state) {
    setData([state.data.some.value ,...data]);
  }

}, [state])

return data
}

function App() {

  return (
    <SSEProvider endpoint="http://127.0.0.1:5000/events" >
        <Component />
    </SSEProvider>
);
}

export default App;

import React，{useState，useffect}来自“React”；
从'react hooks sse'导入{useSSE，SSEProvider}；
导入“/App.css”；
常量组件=（）=>{
const state=useSSE（'scan'）；
const[data，setData]=useState（[]）
useffect（（）=>{
如果（州）{
setData（[state.data.some.value，…data]）；
}
}，[国家]）
返回数据
}
函数App（）{
返回(
);
}
导出默认应用程序；

state

变量在技术上只是从服务器接收的最新消息

import React, { useState, useEffect } from 'react';
import { useSSE, SSEProvider } from 'react-hooks-sse';

import './App.css';


const Component = () => {
  const state = useSSE('scan');
  const [data, setData] = useState([])

  useEffect(() =>{
    if (state) {
    setData([state.data.some.value ,...data]);
  }

}, [state])

return data
}

function App() {

  return (
    <SSEProvider endpoint="http://127.0.0.1:5000/events" >
        <Component />
    </SSEProvider>
);
}

export default App;