请记住以下代码：

var Component = React.createClass({

    getInitialState: function () {
        return {position: 0};    
    },

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

    render: function () {
         return (
            <div className="component">
                {this.state.position}
            </div>
         ); 
    }

});

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

难道不应该在3秒后改变状态吗？它立即改变。

我的主要目标是每3秒更改一次状态（使用setInterval()），但是由于它不起作用，因此我尝试了setTimeout()，该方法也不起作用。上面有灯吗？谢谢！

做

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

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

您还可以使用ES6箭头功能来避免使用this关键字：

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

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

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

每当我们创建超时时，如果尚未触发，则应在componentWillUnmount上清除它。

      let myVar;
         const Component = React.createClass({

            getInitialState: function () {
                return {position: 0};    
            },

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

            componentWillUnmount: () => {
              clearTimeout(myVar);
             };
            render: function () {
                 return (
                    <div className="component">
                        {this.state.position}
                    </div>
                 ); 
            }

        });

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

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

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

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

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

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

你没有告诉谁叫setTimeout

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

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

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

使用function.prototype.bind（）

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

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

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

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

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

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

您的代码作用域（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);

有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)

您做了语法声明错误，请使用正确的setTimeout声明

message:() => { 
  setTimeout(() => {this.setState({opened:false})},3000); 
  return 'Thanks for your time, have a nice day 😊! 
}