ReactJS：this.setState不是函数吗？

我是新来的ReactJS，我有一个错误“this.setState不是一个函数”。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函数。

什么是可能的修复？

谢谢。

来源

2016-06-30 xoomer

是问题的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); 
}

来源

2016-06-30 13:16:51 pinturic

你好Pinturic。是的，这是完美的。也许你可以解释这个以帮助我更好地理解？ – xoomer

你也可以使用箭头函数：'setTimeout（_ => {this.setState（...）}，3000）''让'this'按预期工作 – pawel

我更新了解决方案，如果它不清楚我会详细介绍它。如果你的浏览器/转发器支持它，你可以使用胖箭头语法 – pinturic

这是因为this不具备应有正确的值到运行时绑定。你需要使用词法绑定。最好的解决方案是使用ES6箭头函数() => {}，它提供了该值的词汇绑定。即使是setTimeout()这个词汇的结合会修正这个错误，你得到

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); 
    } 
}

来源

2016-06-30 13:20:26

除了另一种解决方案，以@ pinturic的解决方案是使用ES6箭头功能。如果您使用的是ES6/Babel等，则可以使用箭头函数绑定到词汇this。

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

来源

2016-06-30 13:20:41 sma

ReactJS：this.setState不是函数吗？

回答

相关问题