React 实现验证码倒计时功能：使用 setInterval 和 useState

你可以使用setInterval函数来实现倒计时功能。首先，你需要定义一个useState来保存倒计时的秒数和是否正在倒计时的状态。然后，在组件加载时，你可以使用useEffect来开始倒计时，并在倒计时结束后清除定时器。

以下是一个示例代码：

import React, { useState, useEffect } from 'react';

const Countdown = () => {
  const [countdown, setCountdown] = useState(60);
  const [isCounting, setIsCounting] = useState(false);

  useEffect(() => {
    let intervalId;

    if (isCounting) {
      intervalId = setInterval(() => {
        setCountdown(prevCountdown => prevCountdown - 1);
      }, 1000);
    }

    return () => {
      clearInterval(intervalId);
    };
  }, [isCounting]);

  const startCountdown = () => {
    setIsCounting(true);
  };

  const resetCountdown = () => {
    setIsCounting(false);
    setCountdown(60);
  };

  return (
    <div>
      <p>{countdown} seconds left</p>
      <button onClick={startCountdown} disabled={isCounting}>
        Start Countdown
      </button>
      <button onClick={resetCountdown} disabled={!isCounting}>
        Reset Countdown
      </button>
    </div>
  );
};

export default Countdown;

在上面的例子中，Countdown组件会显示剩余的秒数。点击'Start Countdown'按钮会开始倒计时，点击'Reset Countdown'按钮会重置倒计时。