全新React项目使用CountdownCircleTimer报无效Hook调用错误如何解决

云原生阿岚

2026-10-2

问题修复方案

核心报错原因

你当前使用的react-countdown-circle-timer@2.5.4版本默认导出的是React Native端适配的组件，内部调用了React Native专属的Hook，在Web端直接引入使用就会触发无效Hook调用的报错。

修复步骤

修改CountdownCircleTimer的引入路径，改为导入Web端适配版本
删除代码中未定义的<Timer />组件，避免额外的引用报错

修改后的完整App.js代码

import './App.css';
import { CountdownCircleTimer } from "react-countdown-circle-timer/web";

function App() {
  return (
    <div className="App">
      <CountdownCircleTimer
        isPlaying
        duration={10}
        colors={[
          ["#004777", 0.33],
          ["#F7B801", 0.33],
          ["#A30000", 0.33],
        ]}
      />
    </div>
  );
}

export default App;