有3种方法可以访问“ setTimeout”函数内部的范围

第一，

const self = this
setTimeout(function() {
  self.setState({position:1})
}, 3000)

其次是使用ES6箭头功能，导致箭头功能本身没有作用域（此）

setTimeout(()=> {
   this.setState({position:1})
}, 3000)

第三个是在函数内部绑定范围

setTimeout(function(){
   this.setState({position:1})
}.bind(this), 3000)

setState由于括号而被立即调用！将其包装在一个匿名函数中，然后调用它：

setTimeout(function() {
    this.setState({position: 1})
}.bind(this), 3000);

您的代码作用域（this）将是您的window对象，而不是您的react组件，因此这setTimeout(this.setState({position: 1}), 3000)将导致崩溃。

那来自javascript而不是React，它是js闭包

因此，为了绑定当前的反应组件范围，请执行以下操作：

setTimeout(function(){this.setState({position: 1})}.bind(this), 3000);

或者，如果您的浏览器支持es6或您的projs支持将es6编译为es5，请尝试使用箭头功能，因为箭头功能可解决“此”问题：

setTimeout(()=>this.setState({position: 1}), 3000);

我知道这有点旧了，但是要注意，React建议重新安装组件，以清除安装间隔：https ://reactjs.org/docs/state-and-lifecycle.html

所以我想在这个讨论中添加这个答案：

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

你没有告诉谁叫setTimeout

在这里，如何调用超时而无需调用其他功能。

1.您可以执行此操作而无需执行其他功能。

setTimeout(this.setState.bind(this, {position:1}), 3000);

使用function.prototype.bind（）

setTimeout获取函数的位置并将其保留在上下文中。

2.即使编写更少的代码也可以做到这一点。

setTimeout(this.setState, 3000, {position:1});

可能在某些时候使用了相同的绑定方法

setTimeout仅占据函数的位置，并且函数已经具有上下文？无论如何，它有效！

注意：这些可与您在js中使用的任何功能一起使用。

setTimeout(() => {
  this.setState({ position: 1 });
}, 3000);

由于ES6箭头功能不会更改的上下文，因此上述方法也将起作用this。

做

setTimeout(
    function() {
        this.setState({position: 1});
    }
    .bind(this),
    3000
);

否则，您会将的结果传递setState给setTimeout。