Ausleihen eines Grundstücks Wert aus Zustand in React

Question

Ich weiß nicht, ob ich das richtig formuliert habe, also ertragen Sie mit mir. Grundsätzlich habe ich eine Komponente, die ein funktionierender Zähler ist (inkrementiert oder dekrementiert). Die andere Komponente ist ein Timer, der von (standardmäßig) 25 auf 0 herunter zählt.

Zuvor hatte ich den Timer nur auf den Wert von 25, aber ich habe versucht, den Timer als Wert ändern zu haben der Zähler ändert sich, und wenn der Benutzer die Taste "Start" drückt, wird der Timer von der Zahl herunter zählen, die von dem Zähler festgelegt wurde.

Ich kann die Komponenten einzeln arbeiten, aber nicht zusammen. Ich habe versucht, this.state.currentCount auf den Wert this.props.time, und dann den Wert von this.state.currentCount ändern, aber kein Glück. Entweder bewegt sich der Timer nicht oder er spiegelt nicht den Wert des Zählers wider.

Nicht sicher, ob ich stattdessen componentWillReceiveProps verwenden sollte.

Jede Hilfe würde sehr geschätzt werden. Unten ist ein Screenshot, wenn das überhaupt hilft.

Session Komponente:

const Session = React.createClass({ 

    getInitialState: function() { 
    return { 
     minutes: 25, 
     seconds: 0 
    }; 
    }, 

    increment: function() { 
    this.setState({ minutes: this.state.minutes + 1 }); 
    }, 

    decrement: function() { 
    this.setState({ minutes: this.state.minutes - 1 }); 
    }, 

    timeToString: function(time) { 
    return time + ':00'; 
    }, 

    render: function() { 
    return (
     <section> 
     <button onClick={this.increment}>+</button> 
     <button onClick={this.decrement}>-</button> 
     {this.state.minutes} 
     <Clock time={this.state.minutes}/> 
     </section> 
    ); 
    } 

}); 

module.exports = Session; 

Clock Komponente:

const Clock = React.createClass({ 

    getInitialState: function() { 
    return { currentCount: this.props.time }; 
    }, 

    startTimer: function() { 
    var intervalId = setInterval(this.timer, 1000); 
    this.setState({ intervalId: intervalId }); 
    }, 

    pauseTimer: function() { 
    clearInterval(this.state.intervalId); 
    this.setState({ intervalId: this.props.time }); 
    }, 

    timer: function() { 
    var newCount = this.state.currentCount - 1; 
    if (newCount >= 0) { 
     this.setState({ currentCount: newCount }); 
    } else { 
     clearInterval(this.state.intervalId); 
    } 
    }, 

    render: function() { 
    return (
     <section> 
     <button onClick={this.startTimer}>Start</button> 
     <button onClick={this.pauseTimer}>Pause</button> 
     {this.props.time} 
     <br></br> 
     {this.state.currentCount} 
     </section> 
    ); 
    } 

}); 

module.exports = Clock; 

Answer 1

getInitialState nur läuft, wenn die Komponente zunächst so auf der nächsten Updates von der übergeordneten Komponente initialisiert wird es gewonnen‘ t führen Sie diese Funktion aus. Sie sind richtig , dass Sie eine der Lifecycle-Ereignisse verwenden und in diesem Fall componentWillReceiveProps klingen wie die am besten geeignet, weil Sie setState dort und Sie nicht warten müssen, für die Komponente (sonst machen würden Sie Verwenden Sie componentDidUpdate).

Ich habe den Code nicht überprüft, aber ich denke, dass es mit diesem Zusatz funktionieren soll:

const Clock = React.createClass({ 

    ... 

    componentWillReceiveProps: function(nextProps) { 
     // Perhaps pause timer here as well? 
     this.setState({ 
      currentCount: nextProps.time 
     }) 
    }, 

    ... 

}); 

Answer 2

weil Ihre Timer auf Start Taste abhängt. Es wäre gut, wenn Sie currentCount in startTimer Methode setzen.

startTimer: function() { 
    if(this.state.intervalId) 
    clearInterval(this.state.intervalId); //clear the running interval 

    this.setState({ currentCount: this.props.time }); // reset currentcount 
    var intervalId = setInterval(this.timer, 1000); 
    this.setState({ intervalId: intervalId }); 
},