J'ai ajouté une fonction de défilement infini à ma page. Il attache un écouteur d'événement dans le hook de cycle de vie componentDidMount et je veux le supprimer dans l'action appelée par l'écouteur d'événement lorsqu'il n'y a plus de "nextlink". J'ai défini un message console.log () qui fonctionne bien, mais je ne sais pas pourquoi la fonction window.removeEventListener () ne fonctionne pas. Toute aide serait appréciée.
Morceau de code responsable de l'ajout / suppression du eventListener.
componentDidMount() {
this._isMounted = true;
this.props.onFetchTeams();
this.scrollListener = window.addEventListener("scroll", e => {
this.handleScroll(e);
});
}
handleScroll = () => {
const hasMoreLink = this.props.teams["@odata.nextLink"];
if (hasMoreLink == "") {
console.log("remove event handler");
window.removeEventListener("scroll", this.handleScroll);
}
// If there is at least a team and is currently not loading, proceed to load more.
if (this.state.loadingMore === false && this.props.teams["value"]) {
// get the last teamcard in the page
const lastTeam = document.querySelector(
".team-card-wrapper:last-of-type"
);
// get the height of the current team, and get the height of the current position on screen.
const lastTeamOffset = lastTeam.offsetTop + lastTeam.clientHeight;
const pageOffset = window.pageYOffset + window.innerHeight;
// the range that teams will load earlier than the bottom of the page.
const bottomOffset = 30;
if (pageOffset > lastTeamOffset - bottomOffset) {
this.setState({ loadingMore: true });
this.props.onFetchMoreTeams(hasMoreLink);
}
}
};
p >
3 Réponses :
removeListener a besoin de la même référence pour la fonction que celle utilisée lors de addListener . Changez le code en addEventListener comme
this.scrollListener = window.addEventListener("scroll", this.handleScroll);
cela a fonctionné, merci. Acceptera comme réponse acceptée lorsque cela est autorisé.
Pensez à revoir la façon dont vous ajoutez le gestionnaire d'événements de défilement, en passant directement la fonction handleScroll :
componentDidMount() {
this._isMounted = true;
this.props.onFetchTeams();
/*
With the this.handleScroll bound to this class instance, we can now pass the method
directly to addEventListener as shown
*/
this.scrollListener = window.addEventListener("scroll", this.handleScroll);
}
handleScroll = () => {
const hasMoreLink = this.props.teams["@odata.nextLink"];
if (hasMoreLink == "") {
console.log("remove event handler");
/* This will now work as expected */
window.removeEventListener("scroll", this.handleScroll);
}
/* Rest of your code remains unchanged .. */
}
handleScroll est une fonction de flèche ES6, cela ne la lie-t-il pas automatiquement à la classe? Voir section 13.1: explorejs.com/es6/ch_arrow-functions.html
Ceci est dû au fait que la fonction donnée à addEventListener et celle donnée à removeEventListener devraient être exactement les mêmes, mais dans votre cas, vous créez une nouvelle fonction de flèche pour addEventListener. donc je pense que vous devriez essayer quelque chose comme ceci:
this.scrollListener = window.addEventListener("scroll", this.handleScroll)
...
handleScroll = (e) => {
...
if(noMoreScroll) window.removeEventListener("scroll", this.handleScroll)
...
}
J'espère que cela vous aidera :)
Qu'est-ce qui est consigné lors de l'exécution de
console.log (hasMoreLink)?dès qu'il y a encore des données à récupérer, il enregistrera le lien pour obtenir le prochain lot de résultats. à partir d'une API Microsoft. Après cela, il ne retournera rien et le console.log ('' remove event handler) s'exécutera. Je mettrai à jour mon message pour ajouter une capture d'écran.