Reactjs 为什么我的效果会运行多次，在几次发送后会减慢应用程序的速度？

我使用了当前的代码，但是我得到了多个console.log，我在这里做错了什么？ 我试着使用useCallback和useMemo，但也许我用错了

    useEffect(() => {
        io.on('message', data => {
            console.log(data);
            setMessages([...messages, {...data}]);
        });
    }, [messages]);

    const sendMessage = async event => {
        event.preventDefault();
        if (!message) return;

        io.emit('message', {
            conversationId: conversation._id,
            message: {
                user: {
                    name: user.name,
                    _id: user._id
                },
                text: message,
                createdAt: Date.now()
            }
        });

        const data = {
            conversationId: conversation._id,
            text: message,
            fromUserId: user._id
        };
        setMessage("");
        await axios.post('/api/chat/send-message', data);
    };

此效果将事件处理程序添加到

消息

事件中。每次依赖关系数组中的

消息

发生更改时，它都会运行。因此，我认为每次设置

消息时都会生成多个事件处理程序

您可能希望提供一个清理函数，将旧处理程序解除绑定作为效果的返回值，以便清理旧处理程序

比如：

useEffect(() => {
    const handler = data => {
        console.log(data);
        setMessages([...messages, {...data}]);
    };
    io.on('message', handler);

    return function cleanup() {
       // Or whatever the unbind handler syntax is for whatever io is.
       io.off('message', handler);
    };
}, [messages]);

很高兴它有帮助！别忘了投票并接受有用的答案。欢迎来到堆栈溢出！我不能投反对票，因为我的声誉不高，你仍然可以接受这个答案。只需单击答案左侧的勾号图标
useEffect(() => {
    const handler = data => {
        console.log(data);
        setMessages([...messages, {...data}]);
    };
    io.on('message', handler);

    return function cleanup() {
       // Or whatever the unbind handler syntax is for whatever io is.
       io.off('message', handler);
    };
}, [messages]);