Quelqu'un peut-il me dire ce qu'il me manque pour componentWillUnmount mon code.

L'erreur est

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Layout (created by RoomsPage)
    in RoomsPage (created by HotExportedRoomsPage)
    in AppContainer (created by HotExportedRoomsPage)
    in HotExportedRoomsPage (created by PageRenderer)

Je l'ai vu mille fois comme la plupart d'entre nous, mais je ne semble pas pouvoir unmount. Mon code en question est;

  componentDidMount() {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', debounce(this.handleScroll, 32));
    }
  }

  componentWillUnmount() {
    if (typeof window !== 'undefined') {
      window.removeEventListener('scroll', debounce(this.handleScroll, 32));
    }
  }

  handleScroll = () => {
    const scrollPositionY = +window.scrollY;
    return this.setState({ scrollPositionY });
  };
3
Darren 15 mars 2019 à 00:05

2 réponses

Meilleure réponse

Vous ne supprimez pas l'écouteur d'événement car vous passez des fonctions différentes à addEventListener et removeEventListener. C'est parce que deux fonctions avec des définitions identiques ne sont pas égales. Voir par vous-même:

(() => true) === (() => true) 
// false

Vous devez définir votre fonction, puis la passer.

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

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

handleScroll = debounce(
  () => { this.setState({ scrollPositionY: +window.scrollY }) },
  32
);

Au fait, vous n'avez pas non plus besoin de rechercher window dans componentDidMount ou componentWillUnmount dans la plupart des circonstances… SSR ne monte pas de composants.

2
coreyward 14 mars 2019 à 21:12

Vous attribuez différentes instances à l'écouteur

Solution:

componentDidMount() {
  if (typeof window !== 'undefined') {
      this.hasScrolled = debounce(this.handleScroll, 32);
      window.addEventListener('scroll', this.hasScrolled);
  }
}

componentWillUnmount() {
  if (typeof window !== 'undefined') {
    window.removeEventListener('scroll', this.hasScrolled);
  }
}
0
yasintz 14 mars 2019 à 21:14