Question

我是ReactJS的新手，我遇到了错误＆＃34; this.setState不是函数＆＃34;。

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“this”是指函数本身：所以解决方案是典型的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()词法绑定，也可以解决你得到的错误

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

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

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

ReactJS：this.setState不是函数？

3 个答案: