ReactJS UseEffect 内存泄漏错误 - 是什么原因造成的？

Question

这是我使用 React Hooks 的第一个项目。今天我遇到内存泄漏问题 - 我的应用程序给我这个错误：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我研究了一些解决方案。例如，我可以使用变量跟踪组件的状态 isMounted。

唯一的问题是，我不完全确定我将在哪里实现它。例如，我的一个组件中有 3 个 UseEffect 挂钩。此特定组件是导致内存泄漏错误的原因之一。

使用效果 1:

 useEffect(() => {
    socket.on("allLobbyClients", clients => {
      if (readyList.length == clients.length) {
        socket.emit("gameStarting", activeGamePin);
        socket.on("gameStartingMsg", data => {
          updateGameStarting(data);
        });
        setTimeout(() => {
          navigate("/game-draw", true);
        }, 5000);
      }
    });
  }, [readyList]);

使用效果 2:

  useEffect(() => {
    socket.on("readyClientIndexes", indexes => {
      updateReadyList(indexes);
    });
  }, []);

使用效果 3:

useEffect(() => {
    socket.emit("joinRoom", activeGamePin);
    socket.emit("getClientsForLobby", activeGamePin);
    socket.on("allLobbyClients", data => {
      //Gets the 'Client Index', which can be used to identify them in the <ol> when they specify they are ready to start the game.
      let clientName = window.localStorage.getItem("clientName");
      updateClientIndex(data.indexOf(clientName));
      let activePlayers = data.map((client, index) => (
        <li
          id={index}
          key={index}
          className={readyList.includes(index) ? "ready" : "unready"}
        >
          {client}
        </li>
      ));
      updateClientList(activePlayers);
    });
  }, [readyList]);

我还有一个使用 Axios 发出 POST 请求的函数。

  function playerIsReady() {
    let gamePin = activeGamePin;
    axios
      .post(`${backend}/newIndex`, {
        clientIndex: clientIndex,
        gamePin: gamePin
      })
      .then(response => {
        console.log(response.data);
      });
    setTimeout(() => {
      socket.emit("playerReady", gamePin);
    }, 2000);
    socket.on("readyClientIndexes", indexes => {
      updateReadyList(indexes);
      updateReadyBtn("invisible");
    });
  }

我的主要问题是：内存泄漏错误可能来自哪里？它是来自我的一个 useEffect 挂钩还是来自 Axios 函数？一段时间以来，我第一次感到完全无助于提出解决方案。

非常感谢任何回复 - 提前致谢！

P.S。我怀疑该错误与 Axios 函数有关，因为在我的应用程序的一个组件中发生了内存泄漏错误，该组件不使用 UseEffect 挂钩。因此，我卡住了！

Answer 1

我会说您需要退订 socket 个订阅。通常它是在 useEffect 清理函数中完成的 (return () => {...})

更新

实施isMounted后，在设置异步状态的每个位置前添加条件检查：isMounted && setSomeState(..)

Answer 2

如果没有运行代码，我可能会查看套接字所做的所有工作。您将它们设置为工作，但在组件卸载后无法关闭它们。考虑在 useEffect.return 的函数中清理它们。

ReactJS UseEffect 内存泄漏错误 - 是什么原因造成的？

ReactJS UseEffect memory leak error - what is causing it?

memory-leaks

socket.io

reactjs

axios

更新