Reactjs 通过道具对组件进行反应

我试图将道具传递给一个在使用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>
     )

类秒表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
currentCount:this.props.counter，
小时:0，
分钟:0，
秒：0
}
}
组件willmount（）{
this.timer（this.props.counter）；
}
计时器（）{
这是我的国家({
currentCount:this.state.currentCount-1
})
const seconds=Math.floor（this.state.currentCount%60）；
const minutes=Math.floor（（this.state.currentCount/60）%60）；
常数小时=数学地板（（this.state.currentCount/3600）%3600）；
this.setState（{hours，minutes，seconds}）；
if（this.state.currentCount<1）{
clearInterval（此为有效期）；
}
}
componentDidMount（）{
this.intervalId=setInterval（this.timer.bind（this），1000）；
} 
领先0（个）{
返回数值<10？'0'+num:num；
}
组件将接收道具（下一步）{
if（nextrops.counter！==此.props.counter）{
this.setState（{currentCount:nextrops.counter}）
}
}
render（）{
返回(
小时数{this.leading0（this.state.Hours）}
分钟数{this.leading0（this.state.Minutes）}
秒数{this.leading0（this.state.Seconds）}
)

主代码

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>
    )

}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
截止日期：“2018年12月25日”，
新截止日期：''，
柜台号码：75，
新计数器：“”
};
}
更改截止日期（）{
this.setState（{deadline:this.state.newDeadline}）；
}
更改编号（e）{
this.setState（{counter:this.state.newCounter}）；
}
render（）{
返回(
{本州.截止日期}倒计时
this.setState（{newDeadline:event.target.value}）
/>
this.changeDeadline（）}>提交
来自{this.state.counter}秒的秒表
this.setState（{newCounter:event.target.value}）
/>
this.changeNumber（）}>Submit
)
}

提前感谢
componentDidMount
函数调用一次，如果要重置道具更改上的计数器，应在
componentWillReceiveProps
函数中执行

类秒表扩展组件{
// ...
重置间隔（）{
如果（本条有效）{
clearInterval（此为有效期）；
this.intervalId=null；
}
this.intervalId=setInterval（this.timer.bind（this），1000）；
}
组件将接收道具（下一步）{
if（nextrops.counter！==此.props.counter）{
this.setState（{currentCount:nextrops.counter}）
//重置间隔
这是resetInterval（）
}
}
//...
}