javascript - 使状态与快速发生的事件保持同步

Question

我做了一个自定义的 Hook ，以跟踪基于接收到的套接字事件的数量的状态变量。
当我通过发送10个同时发生的事件进行测试时，状态变量total的结果为6或7或8，而不是预期的10。

const useSocketAmountReceivedState = (event: string): number => {
    const [total, setTotal] = useState(0);

    useEffect(() => {
        Socket.on(event, () => {
            console.log(total);
            setTotal(total + 1);
        });

        return (): void => {
            Socket.off(event);
        };
    });

    return total;
}

运行的日志看起来像

0
1
1
2
3
3
4
4
4
5

上例中的 Socket是围绕websocket的实现。
因此，我可以推断出总数没有足够快地更新，但是处理这种行为的最佳模式是什么？

Answer 1

Socket.on事件必须在useEffect函数之外

const useSocketAmountReceivedState = (event: string): number => {
    const [total, setTotal] = useState(0);
    Socket.on(event, () => {
        console.log(total);
        setTotal(total + 1);
    });
    useEffect(() => {
        return (): void => {
            Socket.off(event);
        };
    }, []);

    return total;
}