SetTimeout Verwendung in setState Rückrufe

Question

Ich habe den folgenden Code in einer reagieren Komponente:

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

Dies funktioniert gut, außer dass, während es läuft ich die folgende Ausnahme in der Konsole sehen:

Uncaught Error: Invariant Violation: enqueueCallback(...): You called setProps , replaceProps , setState , replaceState , or forceUpdate with a callback that isn't callable.

Ich dachte anfangs, dass dies auf die setTimeout-Funktion zurückzuführen ist, also habe ich das in eine andere Funktion extrahiert und diese als Callback-Methode hinzugefügt. In diesem Fall hat render die Aktualisierungen für das DOM nicht mehr angezeigt.

Wie soll ich das richtig machen?

Answer 1

Zweites Argument in setState sollte function sein., window.setTimeout kehrt number aber nicht referenzieren 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>