Enlever L'Écouteur D'Événement Sur Démonter Réagir

J'ai eu une plus grande composante de l'ordre de réagir comme ceci:

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

Après démontage du composant qui sont enveloppés par InfiniteScrolling, ils ont encore lancer le message d'erreur tel que (quand j'ai fait le défilement):

Avertissement: setState(...): ne Peut mettre à jour une montée ou de montage
composante. Cela signifie généralement que vous avez appelé setState() sur un non montés
composante. C'est un no-op. Veuillez vérifier le code de l'indéfini
composante.

Même si je l'ai fait retirer le scroll évènement sur mon composant le démonter. Il n'a pas de travail.

Mais quand j'ai modifié le code comme ceci:

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

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

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

tout semble fonctionner correctement, sans aucun problème.

Je pense qu'ils sont exactement la même chose, mais la seconde travaille très bien, tandis que le premier a été de jeter l'erreur dans la console comme mentionné avant!

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

    Vous êtes toujours la création d'une fonction nouvelle

        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, tellement simple erreur!! bind crée une nouvelle fonction. Mon mauvais!
    • J'ai utilisé la flèche de la fonction, mais c'est toujours pas appelé. Je pense que componentWillUnmount n'est pas appelé.
    • Vous pouvez facilement vérifier si elle a été appelée par la fixation d'un point d'arrêt, ou simplement en ouvrant une session sur la console. De "j'ai utilisé la flèche de la fonction" elle n'a pas d'importance puisque toutes les fonctions étant les objets sont comparés par la réf. Il importe seulement si vous ajouter et supprimer des au fonction.
    InformationsquelleAutor Yury Tarabanko
  2. 1
          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();
            }
        }

    ou vous pouvez utiliser la Flèche fonctions , à résoudre .bind(ce) problèmes de il a travaillé forme de l'amende juste.

    InformationsquelleAutor The pyramid