ReactJS:setTimeout()不起作用？

Question

记住这个代码:

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(),这也没有用.这有什么灯吗？谢谢!

Answer 1

做

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

否则,您将结果传递setState给setTimeout.

Answer 2

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

以上也可以,因为ES6箭头功能不会改变上下文this.

Answer 3

无论何时我们创建超时,我们都应该在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')
);

Answer 4

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

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

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

Answer 5

setState由于括号被立即调用!将其包装在匿名函数中,然后调用它:

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

Answer 6

您的代码范围 ( this)将是您的window对象，而不是您的反应组件，这就是为什么setTimeout(this.setState({position: 1}), 3000)会以这种方式崩溃。

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

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

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

或者，如果您的浏览器支持 es6 或者您的 projs 支持将 es6 编译为 es5，也可以尝试使用箭头函数，因为箭头函数是为了解决“这个”问题：

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

Answer 7

你没有告诉谁叫setTimeout

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

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

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

使用function.prototype.bind（）

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

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

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

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

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

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