javascript - 无法在未安装的组件上调用 setState(或 forceUpdate)。 react

Question

Gutentag，伙计们!

卸载组件后，我的应用程序不断收到此错误消息:

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.
    in Header (at index.js:27)

现在这是 Header 组件的代码:

class Header extends Component {
  isCancelled = false;
  state = {
    someStateVars: x,
    separateColumns: 'true',
  }

  handleChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    if (!this.isCancelled) {
      this.setState({ //######THIS IS LINE 27######
        [name]: value
      });
    }
  }

  handleDisplayChange = (event) => {
    const value = event.target.value;
    const name = 'separateColumns';

    if (!this.isCancelled) {
      this.setState({  
        [name]: value
      }, () => {
        this.props.displayChange();
      });
    }
  }

  serversRefresh = () => {

    if (!this.isCancelled) {
      setTimeout(() => {
        this.setState({refreshed: false});
      }, localStorage.getItem('seconds')*1000); //disable refresh for 15 seconds
    }
  }

  reactivateButton = () => {
    if (!this.isCancelled) this.setState({refreshed: false});
  }

  componentDidMount() {
    if(localStorage.getItem('seconds')>5 && !this.isCancelled){
      this.setState({refreshed: true});
    }
  }

  componentWillUnmount() {
    this.isCancelled = true;
  }
}

当我看到出现此错误时，我添加了 isCancelled 变量，该变量在 componentWillUnmount() 函数中更改为 true。

在我卸载 Header 组件后，15 秒后，当 serversRefreshbutton 重新激活时，我收到此错误消息。

我该如何解决？

在我遇到此问题的另一个组件上，“isCancelled”var 确实有所帮助，但在这里我发现它没有影响并且问题仍然存在。

Answer 1

只需将您的超时时间存储在一个变量中，例如

this.timeout = setTimeout(/* your actions here*/, /* your timeout */)

然后在 componentWillUnmount

中清除超时

componentWillUnmount() {
    clearTimeout(this.timeout)
}

它应该可以解决您的问题，无需像 this.isCancelled 这样的拐杖。检测组件的挂载状态是空操作，因为即使在卸载后它仍然从内存中卸载。

setTimeout 返回计时器的 id，将来可以用它取消。 clearTimeout 通过它的 id 取消超时，如果它还没有被执行的话。

您可以在此处阅读有关您案例的更多信息:Why isMounted is antipattern .

有关 MDN 上计时器的更多信息.