ReactJS：this.setStateは関数ではありませんか？

Question

ReactJSを初めて使用していて、「this.setStateは関数ではありません」というエラーが表示されています。

constructor() { 
    super(); 

    this.state = { 
     visible: false, 
     navLinesShow: true 
    }; 

    this.navOpen = this.navOpen.bind(this) 

} 

navOpen() { 
    this.setState({ 
     navStatus: "navShow", 
     navLinesShow: false 
    }); 

    if (this.state.visible === false) { 

     setTimeout(function(){ 

      this.setState({ 
       visible: true 
      }); 

     }, 3000); 

    } 

私はthis.navOpen = this.navOpen.bind（this）をコンストラクタに追加しました。だから私は問題はsetTimeout関数であると思います。

修正方法はありますか？

ありがとうございます。

Answer 1

はい問題は、「これは」関数自体を参照してくださいsetTimeout関数の内部のsetTimeoutですので、解決策は、典型的なvar that = thisです：

navOpen() { 
this.setState({ 
    navStatus: "navShow", 
    navLinesShow: false 
}); 
if (this.state.visible === false) { 
var that = this; 
    setTimeout(function(){ 
     that.setState({ 
      visible: true 
     }); 
    }, 3000); 
} 

Answer 2

thisが原因正しい値を持っていないので、それはありますランタイムバインドに変換します。レキシカルバインディングを使用する必要があります。最良の解決策は、ES6矢印関数() => {}を使用して、この値の字句結合を提供することです。でも、エラーを修正します。このsetTimeout()字句結合して、あなたが@ pinturicのソリューションに

constructor() { 
    super(); 

    this.state = { 
     visible: false, 
     navLinesShow: true 
    }; 
} 

navOpen =() => { 
    this.setState({ 
     navStatus: "navShow", 
     navLinesShow: false 
    }); 

    if (this.state.visible === false) { 
     setTimeout(() => { 
      this.setState({ 
       visible: true 
      }); 
     }, 3000); 
    } 
} 

Answer 3

加えて、もう一つの解決策を得ているがES6の矢印の機能を使用することです。 ES6/Babelなどを使用している場合は、矢印関数を使用して字句thisにバインドすることができます。

navOpen() { 
    this.setState({ 
     navStatus: "navShow", 
     navLinesShow: false 
    }); 
    if (!this.state.visible) { 
     setTimeout(() => this.setState({visible: true}), 3000); 
    } 
}