组件卸载前,setTimeout未完全取消

Question

Warning: Can't call setState (or forceUpdate) 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 the componentWillUnmount method.

为什么我仍然在设置未安装组件中的状态时出错？在错误跟踪中,它指向setTimeoutin foo().我清除异步计时器并在执行api调用之前添加一个检查 - 我没有看到此警告的来源.

componentDidMount() {
    this.setState({alive: true});
    this.foo();
}

componentWillUnmount() {
    this.setState({alive: false, timer: 0});
}

foo() {

    if (!this.state.alive) return;
    fetch('/api/etc/', {method: 'GET', headers: {'Cache-Control': 'no-cache'}})
    .then(res => res.json())
    .then(json => {

    if (!json.length) return;

    this.setState((prevState) => ({
        timer: setTimeout(this.foo.bind(this), 500)
    });
    });
}

Answer 1

*更新的答案* 正如Evan Trimboli在下面的评论中指出的那样,没有必要在状态中存储超时ID it doesn't impact rendering.

因此,将timeoutID 存储在类实例中,并使用它来清除超时componentWillUnmount.

运行下面的代码以查看它的实际效果

    class TodoApp extends React.Component {
    	timeout = 0;
    
      hello = () => console.log("hello world!")
      
      componentDidMount() {
      	this.timeout = setTimeout(this.hello, 500);
      }
      
      componentWillUnmount() {
      	clearTimeout(this.timeout);
      }
      
      render() {
        return (
          <div>demo</div>
        )
      }
    }

    ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

    <div id="app"></div>

旧答案(使用State存储超时ID).

将超时ID存储在状态中,并使用它来清除超时componentWillUnmount.

const TodoApp = () => {
  const hello = () => console.log("hello world!")

  React.useEffect(() => {
    const timeout = setTimeout(hello, 500);
    return () => clearTimeout(timeout);
  });
  
  return (
    <div>demo</div>
  )
}

    ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://unpkg.com/react@16.8.4/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.production.min.js"></script>

    <div id="app"></div>