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

【问题标题】：How to stop memory leak in useEffect react如何在useEffect反应中停止内存泄漏
【发布时间】：2021-05-27 03:37:43
【问题描述】：

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

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

我的代码是这样的

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

请帮忙，谢谢！

【问题讨论】：

标签： node.js reactjs socket.io chat use-effect

【解决方案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 函数将在组件卸载时运行，从而导致跳过设置状态调用。

【讨论】：