关于javascript:React。

React. this.setState is not a function inside setTimeout

本问题已经有最佳答案,请猛点这里访问。

当前组件的state.breaker值为false。当捕获滚动事件时,它会查看state,如果它的false,它会做一些事情。

我希望在动作再次发生之前有某种静态延迟,这就是为什么在goTo函数中,state.breaker被设置为true并将阻止下一个2s的当前方法的进一步逻辑,直到setTimeout返回false为止。

但目前,以下错误发生在未捕获类型错误的情况下:当setStatesetTimeout内被调用时,this.setState不是函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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

}

你失去了背景。使用arrow函数作为保存正确执行上下文的简单方法:

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

记住,匿名函数将在内部具有上下文window,除非您用function.prototype.bind显式绑定它。所以这里有另一种解决这个问题的方法:

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