ReactJS：setTimeout() 不起作用？

IT技术 javascript reactjs
2021-04-04 07:41:01

记住这个代码： 

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()，这也不起作用。有这方面的灯​​吗？谢谢！

6个回答

做

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

否则，您将传递setStateto的结果setTimeout。

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

setTimeout(
  () => this.setState({ position: 1 }), 
  3000
);
是的，这是有道理的，它正在发挥作用。但是 function() 不是一个函数吗？那么为什么我们需要绑定它呢？我已经尝试过并且确实需要它，我只是想知道为什么。感谢您的帮助:)
2021-05-22 07:41:01
我不明白你为什么说它会将结果传递给 setTimeout，这怎么行不通呢？这种情况下的行为是什么？
2021-05-26 07:41:01
对于那些喜欢使用 ES6 箭头函数的人： setTimeout(() => {this.setState({ position: 1 })}, 3000)@PositiveGuy 不确定自从这个问题发布以来你是否已经自己研究过这个，但如果你没有：丹尼尔的原始示​​例需要.bind(this)将this上下文限制为setState- 否则,this将自动引用调用它的上下文（在这种情况下，匿名function传递给setTimeout）。然而，ES6 箭头函数是词法范围的——它们限制this在调用它们的上下文中。
2021-05-29 07:41:01
@juslintek 定义不起作用。如果需要，请提出一个新问题。
2021-05-31 07:41:01
不起作用... setTimeout(() => { if (!this.props.logoIsLoading && !this.props.isLoading) { console.log('我们会发生吗？'); this.setState({ .. .this.state, shouldUpdate: false, itemToUpdate: null, modalIsOpen: false, modalTitle: '添加新组织' }); } }, 100); 它在类语法糖类的上下文中 class Organizations extends Component { console.log never gets console.log('我们会发生吗？'); 记录它之前和之后的所有内容。
2021-06-13 07:41:01 
setTimeout(() => {
  this.setState({ position: 1 });
}, 3000);

由于 ES6 箭头函数不会改变this.

ES6 语法应该是 React 最佳实践的公认答案。两者都可以工作，但这个更优雅和处理this。
2021-06-10 07:41:01

任何时候我们创建超时我们都应该在 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);
其它你可能感兴趣的问题
上一篇你如何在 ReactJS 中验证嵌套对象的 PropTypes？ 下一篇React 组件和 React 元素的区别