Reactjs 一旦我们的待命完成，多个呼叫将响应服务器端事件

嗨，我已经通过SpringBoot公开了一个流，它为11个对象生成流

有一个react UI，它打开和它的连接，点击按钮开始，我还检查是否收到了所需的对象，并关闭事件源的连接。然而，我看到它不断触发事件源调用，即使我不再点击按钮

以下是我的代码：

import React from 'react'
import { useState } from 'react'
import MaterialTable from 'material-table'
import Button from '@material-ui/core/Button';

const Content = () => {

    const [siteStatus, setSiteStatus] = useState([])
    let eventSource 

    const updateSitesStatus = (site) => {
        if(siteStatus.length >= 11) {
            console.log("Closing Connection")
            eventSource.close()
        }
        setSiteStatus(oldArray => [...oldArray, site]);
    }

    const fetchData = () => {
        eventSource = new EventSource("http://localhost:8080/stream")
        eventSource.onmessage = e => updateSitesStatus(JSON.parse(e.data))
    }

  

    return (
        <div>
            <Button variant="contained" color="primary" onClick={fetchData}>
                Primary
            </Button>
            <MaterialTable

                style={
                    {
                        fontFamily: 'SF Pro Display'
                    }
                }
                columns={[
                    {
                        title: 'Website', field: 'website', filtering: true, headerStyle: {
                            backgroundColor: '#FAFAFA',
                        }
                    },
                    {
                        title: 'User Url', field: 'urlUser', filtering: false, headerStyle: {
                            backgroundColor: '#FAFAFA',
                        }
                    },
                    {
                        title: 'Status', field: 'status', filtering: true, headerStyle: {
                            backgroundColor: '#FAFAFA'

                        }
                    }
                ]}
                data={siteStatus}
                title="Search Results"
                options={{
                    search: false,
                    toolbar: false,
                    filtering: true,
                    paging: false
                }}



            />

        </div>
    );
}

export default Content

从“React”导入React
从“react”导入{useState}
从“物料表”导入物料表
从“@material ui/core/Button”导入按钮；
常量内容=（）=>{
常量[siteStatus，setSiteStatus]=useState（[]）
让eventSource
const updateSetStatus=（站点）=>{
如果（siteStatus.length>=11）{
console.log（“关闭连接”）
eventSource.close（）
}
setSiteStatus（oldArray=>[…oldArray，站点]；
}
常量fetchData=（）=>{
eventSource=新的eventSource（“http://localhost:8080/stream")
eventSource.onmessage=e=>updateSitesStatus（JSON.parse（e.data））
}
返回(
主要的，重要的
);
}
导出默认内容

如果我打印siteStatus.length，它总是在控制台日志中显示0，尽管通过React Chrome工具，它显示state有值。