该应用程序

我正在使用此应用程序，该应用程序从服务器加载数据并将其显示在图表上，并在仪表中显示总数。当新数据存储在数据库中时，服务器还会发出事件。在App.tsx中，我进行API调用，也开始侦听此事件。

问题

API调用工作正常，所有数据均已加载并显示，问题出在socketio事件回调内。该事件数组为空并且currentTotal是零，即初始值。我相信问题与useState挂钩的使用不当有关，但我真的不知道该怎么做。

我想将socket.on（）放在另一个useEffect中，甚至在useState钩子的相同作用域中将其退出，但是它只是创建了很多渲染，页面最终需要花费几秒钟来加载。

这是我的App.tsx文件

...
    const [events, setEvents] = useState<Event[]>([])
    const [currentTotal, setCurrentTotal] = useState<number>(0)

    useEffect(() => {
        api
            .get('/events')
            .then((response) => {
                const total = totals(response.data)
                setCurrentTotal(total)
                setEvents(response.data)
            })
            .catch()

        socket.on('event-created', (newEvent: Event) => {
            if (newEvent.rule_name === 'entering') {
                newEvent.total = currentTotal + 1
            } else {
                newEvent.total = currentTotal - 1
            }

            setCurrentTotal(newEvent.total)
            setEvents([...events, newEvent])
        })
    })
...

这是我在src / services / socketio.ts中的套接字服务

import { io } from 'socket.io-client'

const socket = io('http://127.0.0.1:4001/')
export default socket