마운트 해제 시 이벤트 수신기 제거 반응

마운트 해제 시 이벤트 수신기 제거 반응

다음과 같은 반응으로 고차 컴포넌트를 얻었습니다.

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);
}

아무 문제 없이 모든 게 잘 돌아가는 것 같아요.

똑같이 느껴지지만, 두 번째 것은 정상적으로 동작하고, 첫 번째 것은 앞서 말한 것처럼 콘솔에서 에러를 토해냅니다.

.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);
    }

      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();
            }
        }

또는 Arrow 함수를 사용하여 .bind(이) 문제를 해결할 수 있습니다.그것은 정상적으로 동작했습니다.

조금 늦은 감이 있지만, 이 문제에 직면하게 되어, 제 솔루션을 공유하고 싶다고 생각하고, 피드백을 기다리고 있습니다.이 솔루션에는 다음이 포함됩니다.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]);

Arrow 기능과 바인딩이 없는 내 프로젝트의 작업 버전:

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;
};

언급URL : https://stackoverflow.com/questions/38564080/remove-event-listener-on-unmount-react