React结合Tailwind CSS改造SVG进度条后出现闪烁且不显示动态进度的问题求助

大家好，我最近把一个基于原生JS+HTML实现的SVG进度条改造成了React + Tailwind CSS的版本，但遇到了头疼的问题：点击按钮设置数值后，数字能正常递增，但进度条不仅不显示动态进度变化，还会出现频繁闪烁的情况。

我先把目前的完整代码贴出来（注：useEffect里的tickerRef.current.setAt...代码没贴全，暂时保留现有结构）：

import React, {useRef, useState, useEffect} from 'react';
import './App.css';

function App() {
  const [maxSpeed, setMaxSpeed] = useState(0);
  const [tgtSpeed, setTgtSpeed] = useState(0);
  const [q1Num, setQ1Num] = useState(0);
  const [q2Num, setQ2Num] = useState(0);
  const [q3Num, setQ3Num] = useState(0);
  const [q4Num, setQ4Num] = useState(0);
  const[ctgtSpeed, setCTgtSpeed] = useState(0);
  const[qty, Setqty] = useState('');
  const circleRef = useRef<any>(null);
  const tickerRef = useRef<any>(null);
  const drpDownRef = useRef<any>(null);
  
  useEffect(() => {
    // 原生JS里的进度条驱动逻辑，迁移时只写了一部分
    // tickerRef.current.setAt...
  }, []);

  // 点击按钮更新进度的处理函数
  const handleUpdateProgress = () => {
    // 模拟数值递增逻辑，比如逐步把ctgtSpeed提升到目标值
    const target = parseInt(qty) || 0;
    const timer = setInterval(() => {
      setCTgtSpeed(prev => {
        const next = prev + 1;
        if (next >= target) clearInterval(timer);
        return next > target ? target : next;
      });
    }, 50);
  };

  return (
    <div className="p-8">
      {/* 输入目标值和触发按钮 */}
      <div className="flex items-center gap-4 mb-6">
        <input 
          type="number" 
          value={qty} 
          onChange={(e) => Setqty(e.target.value)}
          className="border border-gray-300 rounded px-3 py-2 w-32"
          placeholder="输入目标值"
        />
        <button 
          onClick={handleUpdateProgress}
          className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors"
        >
          启动进度
        </button>
      </div>

      {/* SVG进度条区域 */}
      <div className="w-64 h-64 mx-auto">
        <svg ref={circleRef} viewBox="0 0 256 256" className="w-full h-full">
          {/* 进度条背景圆 */}
          <circle cx="128" cy="128" r="100" fill="none" stroke="#e5e7eb" strokeWidth="12" />
          {/* 动态进度圆 */}
          <circle 
            cx="128" cy="128" r="100" 
            fill="none" stroke="#3b82f6" strokeWidth="12"
            strokeDasharray={`${2 * Math.PI * 100}`}
            strokeDashoffset={2 * Math.PI * 100 * (1 - ctgtSpeed / (maxSpeed || 100))}
            strokeLinecap="round"
          />
          {/* 显示当前数值的文本 */}
          <text x="128" y="135" textAnchor="middle" fontSize="28" fontWeight="bold" fill="#333">
            {ctgtSpeed}
          </text>
        </svg>
      </div>
    </div>
  );
}

export default App;

我已经尝试过的操作： #

• 调整useEffect的依赖项，把ctgtSpeed和maxSpeed加进去，确保状态变化时重新计算strokeDashoffset
• 检查Tailwind样式是否和SVG的动画属性冲突，比如移除了一些可能影响的类，但问题依旧
• 尝试用requestAnimationFrame替代setInterval来更新数值，闪烁情况略有缓解但还是存在

想请教大家的问题： #

有没有大佬遇到过类似的React+SVG进度条动画异常的情况？能不能帮我分析下可能的原因？比如是不是React的重渲染导致SVG属性更新不连贯？或者Tailwind的某些默认样式干扰了SVG动画？有没有具体的修复方案可以让进度条流畅显示动态变化？

备注：内容来源于stack exchange，提问作者Vicky