如何在 useEffect 反应中阻止内存泄漏

Question

你好，我在 useEffect 中遇到了内存泄漏，我收到了这个错误“警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明存在内存泄漏在您的应用程序中。要修复，取消 useEffect 清理函数中的所有订阅和异步任务。"

当我从后端发出消息时，我正在尝试更新我的消息状态。

我的代码是这样的

    useEffect(() => {
        socket.on("message", data => {
            setMessages(prevVal => [...prevVal, {
                author: data.id,
                text: data.text
            }]);
        });
    }, [socket]);

请帮忙，谢谢！

Answer 1

如果您的组件在执行设置状态调用时已经卸载，就会发生这种情况，这可能是因为您正在调用使用回调的异步函数 socket.on。

每当您遇到这些可能会尝试改变组件状态的异步副作用时，您应该使用 a cleanup pattern。

例如（给定一个 socket.io 套接字）

useEffect(() => {
  const onMessage = data => {
      setMessages(prevVal => [...prevVal, {
        author: data.id,
        text: data.text
      }]);
    };

  // Register listener
  socket.on("message", onMessage);

  // On cleanup, remove the attached listener
  return () => socket.off("message", onMessage)

}, [socket]);

useEffect 返回的 cleanup 函数将在卸载组件时运行，导致设置状态调用被跳过。

如何在 useEffect 反应中阻止内存泄漏

How to stop memory leak in useEffect react

chat

node.js

socket.io

reactjs

use-effect