ReactJS： setTimeout（）不起作用？

javascript reactjs

2022-08-30 04:27:09

牢记此代码：

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秒（with）更改一次状态，但是由于它不起作用，因此我尝试了，这也不起作用。这上面有灯吗？谢谢！setInterval()setTimeout()

答案 1

做

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

否则，您将把的结果传递给。setStatesetTimeout

您也可以使用ES6箭头函数来避免使用关键字：this

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

答案 2

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

上述操作也有效，因为 ES6 箭头函数不会更改的上下文。this

ReactJS： setTimeout（） 不起作用？

ReactJS： setTimeout（）不起作用？