反応。 this.setStateはsetTimeout内の関数ではありません

Question

現在のコンポーネントの値はstate.breakerで、falseです。スクロールイベントがキャプチャされるとき、それはstateを見て、そのfalseが何かをします。

私が再発するアクションの前に静的遅延のいくつかの種類を持っていると思いますし、それがgoTo関数内state.breakerがtrueに設定されている理由だと次の2ssetTimeoutまではに戻りますため、現在の方法のさらなるロジックをブロックしますfalse。

しかし、現時点で次のエラーが捕捉されない例外TypeErrorが発生します。this.setStateはsetStateがsetTimeout内部で呼び出される関数ではありません。

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

コンテキストが紛失しています。適切な実行コンテキストを維持するために矢印機能として簡単な方法を使用します。

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

明示的Function.prototype.bindとそれをバインドしない限り、匿名関数は、内部コンテキストwindowを持っていることを覚えておいてください。この問題を解決する別の方法は次のとおりです。

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