我有一个Radial Progess SVG ReactJs组件，可以看到here的工作情况：

let PROGRESS_RADIAL_ID = 'progressRadial';

function RadialProgress(props) {
    let circumference;
    const [points,setPoints] = React.useState();

    //didmount
    React.useEffect(() => {
        setTimeout(() => setPoints(props.points));
     },[]);

    React.useEffect(() => {
        const circle = document.getElementById(PROGRESS_RADIAL_ID);
        const radius = circle.r.baseVal.value;
        circumference = radius * 2 * Math.PI;
        circle.style.strokeDasharray = `${circumference} ${circumference}`;
        circle.style.strokeDashoffset = circumference;
        animateRadial(points / props.threshold * 100);
    },[points]);

    function animateRadial(percent) {
        const circle = document.getElementById(PROGRESS_RADIAL_ID);
        const offset = circumference - percent / 100 * circumference;
        circle.style.strokeDashoffset = offset;
    }

    return (
        <div classname="row progress">
            <div classname="col-xs-6 progress-container">
                <svg
                    width="140"
                    height="140">
                    <circle
                        fill="#F7F7F7"
                        r="66"
                        cx="70"
                        cy="70"
                    />
                    <circle
                        stroke="#E3E6E8"
                        strokeWidth="18"
                        fill="transparent"
                        r="44"
                        cx="70"
                        cy="70"
                    />
                    <circle
                        id={PROGRESS_RADIAL_ID}
                        classname="progress-radial"
                        strokeWidth="18"
                        fill="transparent"
                        r="44"
                        cx="70"
                        cy="70"
                    />
                    <text
                        x="50%"
                        y="50%"
                        dominantBaseline="middle"
                        textAnchor="middle"
                        classname="txt-points">
                        {points}/{props.threshold}
                    </text>
                </svg>
                <input 
                  placeholder={`enter points <= ${props.threshold}`}
                  onChange={(e) => setPoints(e.target.value)} type="text" />
            </div>
        </div>
    );
}

ReactDOM.render(<RadialProgress
                  points={30}
                  threshold={50}
                  />,document.getElementById('root'));

我的问题是，当组件加载“径向进度”微调器SVG圆时，有时会开始填充全冲程，然后减小，而不是从零开始并增加。

如果您在CodePen的文本框中输入点数（例如25），则会看到正确的动画。

对于组件didmount，我尝试使用setTimeout。

有没有一种方法可以确保Circle笔触填充从0开始并在didmount上动画，就像我的文本框onChange在加载组件时演示的那样。有时，它可以在didmount上正常运行，而有时则不能。