Question

我在react组件中有以下代码：

  calcTime: function() {
    time = <some time dependant value>
    this.setState({
      total_time: time
    }, window.setTimeout(this.calcTime, 1000));
  }

这很好用，除了它在运行时我在控制台中看到以下异常：

未捕获错误：不变违规：enqueueCallback（...）：您调用了setProps， replaceProps，setState，replaceState或forceUpdate 不可调用的回调。

我最初认为这是由于在那里设置了setTimeout函数，所以我将其解压缩到另一个函数，并将其作为回调方法添加。但是，执行此操作时，render停止显示DOM的更新。

我该如何正确地做到这一点？

Answer 1

setState中的第二个参数应为function。，window.setTimeout返回number但不提及function

var App = React.createClass({
  getInitialState: function () {
    return {
      total_time: 0
    }
  },
  
  componentDidMount: function () {
    this.calcTime();
  },
  
  calcTime: function() {
    var time = this.state.total_time + 10;
    
    this.setState({
      total_time: time
    }, () => { 
      window.setTimeout(this.calcTime, 1000)
    });
  },
  
  render: function() {
    return <div>{this.state.total_time}</div>;
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

在setState回调中使用setTimeout

1 个答案: