Reagieren. this.setState ist keine Funktion innerhalb von setTimeout

Question

Aktuelle Komponente hat state.breaker Wert von false. Wenn das Scroll Event aufgenommen wird, schaut es sich die state an und wenn es false ist, tut es einiges.

Ich mag eine Art von statischer Verzögerung haben, bevor die Aktion wiederholen und deshalb innerhalb goTo Funktion der state.breaker auf true gesetzt ist und die die weitere Logik der aktuellen Methode zum nächsten 2s bis setTimeout kehrt zurück blockieren false.

Aber zum gegenwärtigen Zeitpunkt der folgende Fehler auftritt Uncaught Typeerror: this.setState keine Funktion ist wenn setState innerhalb setTimeout genannt wird.

class Slide extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     breaker: false 
    } 

    this.scrollRedirect = this.scrollRedirect.bind(this); 
    } 

    componentDidMount() { 
    this.refs.holder.addEventListener('mousewheel', this.scrollRedirect); 
    } 


    scrollRedirect(e) { 

    const path = this.props.location.pathname, 
    goTo = (route) => { 
     this.setState({breaker: true}); 
     hashHistory.push(route); 

     setTimeout(function() { 
     this.setState({breaker: false}); 
     }, 2000) 
    }; 

    if (!this.state.breaker) { 
     ... code that executes goTo on condition 
    } 
    } 

    ... render code 

} 

Answer 1

Sie verlieren den Kontext. Mit dem Pfeil Funktion als einfache Art und Weise der richtigen Ausführungskontext zu erhalten:

setTimeout(() => { 
    this.setState({breaker: false}); 
}, 2000) 

Denken Sie daran, dass anonyme Funktion Kontext window innen haben wird, sofern Sie es nicht explizit binden mit Function.prototype.bind. Also hier ist ein anderer Weg, um dieses Problem zu lösen:

setTimeout(function() { 
    this.setState({breaker: false}); 
}.bind(this), 2000)