React 將 props 傳遞給組件

Question

我試圖將道具傳遞給一個在使用 componentWillReceiveProps 時工作的組件，但是一旦計數器完成，它就會調用clearInterval(this.intervalId); 但是，一旦我再次更改輸入，計數器就不會再次啟動。 如何將更新的道具傳遞回組件？

組件代碼；

class Stopwatch extends Component {
    constructor(props) {
       super(props);
        this.state = {
            currentCount: this.props.counter,
            hours: 0,
            minutes: 0,
            seconds: 0
        }
}

componentWillMount() {
  this.timer(this.props.counter);
}

timer() {
  this.setState({
    currentCount: this.state.currentCount - 1
})

  const seconds = Math.floor(this.state.currentCount % 60);
  const minutes = Math.floor((this.state.currentCount/60) % 60);
  const hours = Math.floor((this.state.currentCount/3600) % 3600);

  this.setState({hours, minutes, seconds});

  if (this.state.currentCount < 1) {
    clearInterval(this.intervalId);
  }
}

componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
} 

leading0(num) {
    return num < 10 ? '0' + num : num;
}

componentWillReceiveProps(nextProps){
  if(nextProps.counter !== this.props.counter){
    this.setState ({currentCount: nextProps.counter})
  }
}

render() {
    return (
        <div>
            <div>Hours {this.leading0(this.state.hours)}</div>
            <div>Minutes {this.leading0(this.state.minutes)}</div>
            <div>Seconds {this.leading0(this.state.seconds)}</div>
        </div>
     )

主要代碼；

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        deadline: 'December 25, 2018',
        newDeadline: '',
        counter: 75,
        newCounter: ''
    };
}

changeDeadline() {
    this.setState({deadline: this.state.newDeadline});
}

changeNumber(e) {
    this.setState({counter: this.state.newCounter});
}

render() {
    return (
        <div className='App'>
            <div className='App-title'>Countdown to {this.state.deadline}</div>
            <Clock 
                deadline={this.state.deadline}
            />
            <Form inline>
                <FormControl
                    className="Deadline-input"
                    placeholder='New Date'
                    onChange={event => this.setState({newDeadline: event.target.value})}
                />
                <Button onClick={() => this.changeDeadline()}>Submit</Button>
            </Form>

            <div>Stopwatch From { this.state.counter } Seconds</div>
            <Stopwatch 
                counter={this.state.counter}
            />
            <Form inline>
                <FormControl
                    className="Deadline-input"
                    placeholder='New Number'
                    onChange={event => this.setState({newCounter: event.target.value})}
                />
                <Button onClick={() => this.changeNumber()}>Submit</Button>
            </Form>
        </div>
    )

}

提前致謝

Answer 1

componentDidMount函數調用一次，如果你想在 props 改變時重置計數器，你應該在componentWillReceiveProps函數中進行

class Stopwatch extends Component {
    // ...
    resetInterval() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = null;
        }
        this.intervalId = setInterval(this.timer.bind(this), 1000);
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.counter !== this.props.counter){
            this.setState ({currentCount: nextProps.counter})
            // reset interval
            this.resetInterval()            
        }
    }
    //...
}