在卸载 React 时删除事件侦听器

IT技术 javascript reactjs
2021-04-18 09:07:15

我在react中具有更高阶的组件，如下所示：

export default function (InnerComponent) {
    class InfiniteScrolling extends React.Component {

        constructor(props){
            super(props);
        }

        componentDidMount() {
            window.addEventListener('scroll', this.onScroll.bind(this), false);
        }

        componentWillUnmount() {
            window.removeEventListener('scroll', this.onScroll.bind(this), false);
        }

        onScroll() {
            if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 50)) {
                const { scrollFunc } = this.props;
                scrollFunc();
            }
        }

        render() {
            return <InnerComponent {...this.props} />;
        }
    }

    InfiniteScrolling.propTypes = {
        scrollFunc: PropTypes.func.isRequired
    };

    return InfiniteScrolling;
}

卸载通过 包装的组件后InfiniteScrolling，它们仍然抛出错误，例如（当我滚动时）：

警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查未定义组件的代码。

即使我确实删除了scroll组件卸载上的事件。它没有用。

但是当我把代码改成这样时：

constructor(props){
    super(props);
    this.onScroll = this.onScroll.bind(this);
}

componentDidMount() {
    window.addEventListener('scroll', this.onScroll, false);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll, false);
}

一切似乎都运行良好，没有任何问题。

我觉得它们完全一样，但是第二个工作正常，而第一个在控制台中抛出了前面提到的错误！

4个回答

.bind 总是创建一个新函数，所以你需要像下面那样做，所以它添加和删除了相同的函数。

    constructor(props){
        super(props);
        this.onScroll = this.onScroll.bind(this); //bind function once
    }

    componentDidMount() {
        window.addEventListener('scroll', this.onScroll, false);
    }

    componentWillUnmount() {
        // you need to unbind the same listener that was binded.
        window.removeEventListener('scroll', this.onScroll, false);
    }
@AmitJS94 您可以通过设置断点或简单地登录到控制台来轻松检查它是否已被调用。至于“我使用过箭头函数”，这无关紧要，因为所有作为对象的函数都由 ref 进行比较。仅当您添加和删除相同的功能时才重要。
2021-05-27 09:07:15
OMG，这么简单的错误！！bind创建一个新函数。我的错！
2021-05-30 09:07:15
我已经使用了箭头函数，但它仍然没有被调用。我认为 componentWillUnmount 没有被调用。
2021-06-11 09:07:15 
      componentDidMount() {
            window.addEventListener('scroll', this.onScroll, false);
        }

        componentWillUnmount() {
            window.removeEventListener('scroll', this.onScroll, false);
        }
        // use arrow function instead
        onScroll = () => { 
            if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 50)) {
                const { scrollFunc } = this.props;
                scrollFunc();
            }
        }

或者你可以使用箭头函数来解决 .bind(this) 问题，它工作得很好。

我知道现在有点晚了，但我刚刚遇到这个问题，想与您分享我的解决方案，期待任何反馈。该解决方案包括react hooks. 我希望你能喜欢

// Declare a static listener.
const eventListeners = useRef();

// now let's create our scroll Handler
const scrollHandler = useCallback(() => {...},[]);

useEffect(() => {
   // Here will be removing the static listener and then updated it for 
   // our new one since the first time will be empty it won't do anything.
    window.removeEventListener('scroll', eventListeners.current, true);

    // Then will set our current scroll handler to our static listener
    eventListeners.current = scrollHandler;

    // Here will be adding the static listener so we can keep the reference
    // and remove it later on
    window.addEventListener('scroll', eventListeners.current, true);
},[scrollHandler]);

带有箭头函数和无绑定的我的项目的工作版本：

componentDidMount = () => {
  window.addEventListener("wheel", this.onScroll, false);
};

componentWillUnmount() {
  window.removeEventListener("wheel", this.onScroll, false);
}

onScroll = (e) => {
  const item = this.refs.myElement;
  if (e.deltaY > 0) item.scrollLeft += 200;
  else item.scrollLeft -= 200;
};
其它你可能感兴趣的问题
上一篇React：向现有组件添加props 下一篇如何在 react-router 中使用普通锚链接