在卸载组件后,React中的限制事件回调会导致错误

时间:2015-12-23 18:42:30

标签: reactjs

我有一个窗口调整大小事件回调,我决定限制以提高性能。在某些断点处,组件被移除。结果是,有时在调整大小时,我会收到以下消息:Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.

当我移除油门时,此错误消失。我认为发生的事情是以下顺序:

  1. 调整事件触发大小并调用throttle
  2. 组件已卸载
  3. throttle来电_updateInstance
  4. 我可以通过检查组件是否安装在_updateInstance内来轻松解决此问题,但React Docs似乎认为这样做始终是代码气味。我理解他们的原因,但我认为我正在做的事情很好,他们没有提到这个案子。

    我想知道是否有更合适的方式来做我正在做的事情并避免使用Invariant Violation。现在我正在设置一个isMounted标志,但是a)它很烦人,并且b)它会在所有情况下隐藏错误消息,即使它可能表明存在实际问题(详见我链接到的文档)上文)。

    这是相关代码。顺便说一下,错误是从_updateInstance的第一行抛出的。

    constructor() {
      this._handleScreenChange = throttle(this._updateInstance.bind(this), 250);
    }
    
    componentDidMount() {
      window.addEventListener('resize', this._handleScreenChange);
    }
    
    componentWillUnmount() {
      window.removeEventListener('resize', this._handleScreenChange);
    }
    
    _updateInstance() {
      const el = ReactDOM.findDOMNode(this);
      if (!inViewport(el)) return;
      this.doStuff();
    }
    

0 个答案:

没有答案