时间戳

首页 > 解决方案 > 使用 eventListener 增加值

reactjs - 使用 eventListener 增加值

问题描述

鉴于：

export default function ComponentA(props) {

    const [x, setX] = useState(0)
    
    useEffect(() => {
        connect("http://localhost:18200/events/agg/dotusd");
    })

    const connect = (url) => {
        const es = new EventSource(url, { withCredentials: false });
        es.addEventListener('heartBeat', handleHeartBeat);
    };

    const handleHeartBeat = (event) => {
        setX((x) => x + 1)
        const currentdate = new Date(); 
        const datetime = " "
                + currentdate.getHours() + ":"  
                + currentdate.getMinutes() + ":" 
                + currentdate.getSeconds();
        console.log("time =", datetime + "; x =", x)
    }

    return (
        <div>
            <ComponentB key='1' x={x} />
        </div>
    );
}

何时：heartbeat事件发生。

然后：增加x值并将其记录到控制台，因此：

1  
2  
3  
4  
...

结果：它做了一个奇怪的递归：

0  
0 1  
0 1 2  
0 1 2 3  
...

为什么以及如何解决它？

在此处输入图像描述

标签： reactjs

解决方案

添加一个空数组作为useEffect. 这告诉 react 只在组件安装时运行该代码一次。目前，每次该组件重新渲染时，都会添加另一个事件侦听器。

useEffect(() => {
    connect("http://localhost:18200/events/agg/dotusd");
}, [])

推荐阅读