Reagieren. Entprellungsfunktion die setState Methode

Question

Ich entwickle eine einfache hoc-Komponente, die auf seine Kinder Ansichtsfenster Dimensionen geht implementiert. Bei der Fenstergrößenanpassung initiiere ich die Methode handleResize, um neue Fenstermaße in die untergeordnete Komponente zu übernehmen. Ich möchte debounce func von lodash verwenden Anzahl der Male zu minimieren, dass handleResize Methode aufgerufen wird (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 

Es funktioniert wie erwartet, aber ich bekomme immer wieder die Warnung, dass:

tut jemand weiß, was los ist?

lass es mich wissen

Answer 1

im Auge behalten Sie das Ereignis nicht zu entfernen. if (window) window.addEventListener('resize', debounce(this.handleResize, 400)) wird die Funktion mutieren und eine gewickelte Funktion zurückgeben, die Entfernung der Veranstaltung übergibt nur die ursprünglichen this.handleResize, die gefunden wird nicht.

müssen Sie this.handleResize = debounce(this.handleResize, 400) im Konstruktor.

tl; dr: Komponente aushängen aber Ereignis wird Brennen fortzusetzen.