reactjs - react Hook 。无法对已卸载的组件执行 React 状态更新

Question

我收到此错误:

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.

当开始获取数据并且组件已卸载时，但函数正在尝试更新已卸载组件的状态。

解决这个问题的最佳方法是什么？

CodePen example 。

default function Test() {
    const [notSeenAmount, setNotSeenAmount] = useState(false)

    useEffect(() => {
        let timer = setInterval(updateNotSeenAmount, 2000) 

        return () => clearInterval(timer)
    }, [])

    async function updateNotSeenAmount() {
        let data // here i fetch data

        setNotSeenAmount(data) // here is problem. If component was unmounted, i get error.
    }

    async function anotherFunction() {
       updateNotSeenAmount() //it can trigger update too
    }

    return <button onClick={updateNotSeenAmount}>Push me</button> //update can be triggered manually
}

Answer 1

最简单的解决方案是使用局部变量来跟踪组件是否已安装。这是基于类的方法的常见模式。这是an example用钩子(Hook)实现它:

function Example() {
  const [text, setText] = React.useState("waiting...");

  React.useEffect(() => {
    let isCancelled = false;

    simulateSlowNetworkRequest().then(() => {
      if (!isCancelled) {
        setText("done!");
      }
    });

    return () => {
      isCancelled = true;
    };
  }, []);

  return <h2>{text}</h2>;
}

这里是an alternative与 useRef (见下文)。请注意，对于依赖项列表，此解决方案将不起作用。第一次渲染后，ref 的值将保持不变。在这种情况下，第一个解决方案更合适。

function Example() {
  const isCancelled = React.useRef(false);
  const [text, setText] = React.useState("waiting...");

  React.useEffect(() => {
    fetch();

    return () => {
      isCancelled.current = true;
    };
  }, []);

  function fetch() {
    simulateSlowNetworkRequest().then(() => {
      if (!isCancelled.current) {
        setText("done!");
      }
    });
  }

  return <h2>{text}</h2>;
}

您可以在 article 中找到有关此模式的更多信息。 。这是an issue在 GitHub 上的 React 项目中展示了此解决方案。