为什么componentWillReceiveProps会在第二次点击时触发？

Question

我有两个组成部分

1. OTP 2.计时器

   当用户第二次单击按钮（发送otp按钮），在Timer组件上触发componentWillReceiveProps时，我想单击一次以触发componentWillReceiveProps

class OTP extends Component {

 constructor(props) {
        super(props);
        this.state = {
            start: false,
            text: "",
            resend:false
        };
    }

  otpSend = () => { // starttimer props true than timer start 

    this.setState({
      start: true,
      resend: false
    });

  }
  render() {
    return ( <
      TimerModule time = {
        7
      }
      ModuleName = "Consent Code expires in :"
      starttimer = {
        this.state.start
      }
      CodeExpire = {
        this.expire
      }
      />:null <
      input type = "submit"
      className = "btn btn-success submit-btn-redeem"
      value = "SEND OTP"
      onClick = {this.otpSend}
      />
    )
  }
}
export default class TimerModule extends Component {

  async componentWillReceiveProps(newProps) { 

    if (newProps.starttimer === true) {// check the flag for timer
      if (this.state.intervalId != 0) {
        clearInterval(this.state.intervalId);
      }
      await this.setState({
        start: true,
        seconds: newProps.time
      });
      this.timer(newProps.time);
      let intervalId = setInterval(() => this.timer(), 1000);
      this.setState({
        intervalId: intervalId
      })
    } else {
      this.setState({
        start: false
      });
    }
  }

  timer() {

    if (this.state.seconds > 0) {
      this.setState(prevState => ({
        seconds: prevState.seconds - 1
      }));
    } else {

      this.setState({
        start: false
      });
      clearInterval(this.state.intervalId);
      this.props.CodeExpire(true);
    }

  }
}

因此单击发送otp按钮otpSend函数会在props starttimer中设置启动状态（标志以启动计时器），因此，如果它是真的，则计时器启动，但是componentWillReceiveProps在第二次单击时有效，我想在第一次单击时触发事件任何帮助被赞赏