Réagir. Fonction de dématérialisation qui implémente la méthode setState

Question

Je développe un composant hoc simple qui transmet les dimensions de viewport à ses enfants. Lors du redimensionnement de la fenêtre, j'initie la méthode handleResize pour passer les nouvelles dimensions de la fenêtre au composant enfant. Je veux utiliser debounce func de lodash pour minimiser le nombre de fois que la méthode handleResize est appelée (ref).

import React from 'react' 

import debounce from 'lodash/debounce' 

const getDimensions = (Component) => { 
    return class GetDimensions extends React.Component { 
    constructor() { 
     super() 

     this.state = { 
     viewport: { 
      x: window.innerWidth, 
      y: window.innerHeight 
     } 
     } 
    } 

    handleResize =() => { 
     this.setState(() => ({viewport: {x: window.innerWidth, y: window.innerHeight}})) 
    } 

    componentDidMount =() => { 
     if (window) window.addEventListener('resize', debounce(this.handleResize, 400)) 
    } 

    componentWillUnmount =() => { 
     if (window) window.removeEventListener('resize', this.handleResize) 
    } 

    render() { 
     return (
     <Component 
      {...this.props} 
      viewport={this.state.viewport} 
     /> 
    ) 
    } 
    } 
} 

export default getDimensions 

Il fonctionne comme prévu, mais je continue à obtenir l'avertissement que:

ne quelqu'un sait ce qui se passe?

s'il vous plaît laissez-moi savoir

Answer 1

garder à l'esprit que vous ne supprimez pas l'événement. if (window) window.addEventListener('resize', debounce(this.handleResize, 400)) va muter la fonction et retourner une fonction enveloppée, la suppression de l'événement passe juste l'original this.handleResize, qui ne sera pas trouvé.

vous devez this.handleResize = debounce(this.handleResize, 400) dans le constructeur. Tl; dr: le composant sera démonté mais l'événement continuera à se déclencher.