Entfernen Von Ereignis-Listener Auf Unmount Reagieren

Hatte ich höhere order-Komponente im so reagieren:

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

Nach aushängen der Komponente, die umgebrochen wurde über InfiniteScrolling Sie, wo immer noch werfen die Fehlermeldung (wenn ich nicht scrollen):

Achtung: setState(...): Kann nur aktualisieren montiert oder bei der Montage
Komponente. Dies bedeutet in der Regel, die Sie genannt setState() auf einer nicht gemounteten
Komponente. Dies ist ein no-op. Bitte überprüfen Sie den code für die undefined
Komponente.

Obwohl ich habe entfernen Sie die scroll Fall auf meine Komponente aushängen. Es hat nicht funktioniert.

Aber wenn ich änderte den code wie dieser:

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

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

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

scheint alles einwandfrei zu funktionieren, ohne Probleme.

Ich glaube, Sie sind genau die gleiche Sache, aber die zweite funktioniert gut, der erste war, werfen sich die Fehler in der Konsole, wie bereits erwähnt!

InformationsquelleAutor Ant's | 2016-07-25
  1. 70

    Sind Sie immer die Schaffung neuer Funktion

        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);
    }
    • OMG, so einfache Fehler!! bind erstellt eine neue Funktion. Mein schlechtes!
    • Ich habe verwendet die Pfeil-Funktion, aber es ist immer noch nicht genannt. Ich denke, componentWillUnmount ist nicht immer genannt.
    • Könnte man leicht prüfen, ob es schon genannt wurde, indem ein breakpoint oder einfach logging auf die Konsole. Wie von "ich habe Pfeil-Funktion" es spielt keine Rolle, da alle Funktionen Objekte sind, im Vergleich von ref. Es ist nur von Bedeutung, wenn Sie das hinzufügen und entfernen gleichen - Funktion.
    InformationsquelleAutor Yury Tarabanko
  2. 2
          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();
            }
        }

    oder Sie verwenden die Pfeil-Funktionen , zu lösen .bind(this) Probleme, es funktionierte form Prima.

    InformationsquelleAutor The pyramid
Schreibe einen Kommentar