react-countdown-circle-timer如何传参实现归零调API循环计时

你当前的代码已经正确配置了计时结束自动重复的基础逻辑，只需要调整onComplete回调的内部逻辑，在回调触发时先执行目标API调用，再返回重复计时的配置即可，不需要新增或修改其他传入组件的props。

核心注意点 #

• API调用逻辑要写在return重复配置之前，确保每次计时归零时都会先触发接口请求
• 异步接口不需要等待响应返回再重置计时，直接发起请求即可，避免计时循环被接口请求阻塞
• 如果需要根据接口返回结果控制计时行为（比如请求失败时暂停循环），可以把回调改成异步函数，等待接口返回后再动态返回对应配置

修改后完整代码 #

import { CountdownCircleTimer } from "react-countdown-circle-timer";
import "./CountDownTimer.css";

// 替换为你实际的接口请求逻辑
const callSpecifiedApi = () => {
  // 示例：替换为真实的接口调用，比如 fetch('/your-endpoint')
  console.log("计时结束，触发接口调用");
};

const renderTime = ({ remainingTime }) => {
    if (remainingTime === 0) {
        return <div className="timer">Too late...</div>;
    }

    return (
        <div className="timer">
            <div className="value">{remainingTime}</div>
        </div>
    );
};
const CountDownTimer = () => (
    <>
        <div className="App">
            <div className="timer-wrapper">
                <CountdownCircleTimer
                    isPlaying
                    duration={30}
                    colors={["#FFAD22", "#714DFF", "#5AD4FB", "#A30000"]}
                    colorsTime={[25, 20, 15, 0]}
                    onComplete={() => {
                      // 计时归零时调用指定接口
                      callSpecifiedApi();
                      // 返回配置实现无延迟自动重置、重复计时
                      return { shouldRepeat: true, delay: 0 };
                    }}
                >
                    {renderTime}
                </CountdownCircleTimer>
            </div>
        </div>
    </>
);

export default CountDownTimer;

如果你需要接口请求完成后再开始下一轮计时，只需要把onComplete改成异步函数，await接口请求完成后再返回配置对象，同时可以给delay设置对应值调整重置等待时间。

内容的提问来源于stack exchange，提问作者Chaudhari Devam