Javascript React JS中的进度圆栏

我正在创建一个进度循环条，与滑块一起用作计时器，每个幻灯片都有自己的进度循环条

我可以实现它，但是我不能同步酒吧与他们自己

这就是正在发生的事情：

如你所见，它工作不正常。我需要这个条来填满100%的圆，然后继续到下一个点并重复这个过程，但是我无法同步它们

如果我只有一个圆点，它似乎工作得很好，不过：

我使用了两个

setTimeout

，一个通过

百分比的控制来减少
圆圈的属性
笔划dashoffset
，这一个使条形图被填充；第二个
setTimeout
正是为了使圆圈出现在下面的点周围。我有一个变量
timer
，它控制更改的间隔，它位于第二个
setTimeout
中。我相信问题可能在于两个设置超时之间的时间，但这只是一个猜测

我正在使用钩子，但是我不能让它在Codepen上以这种方式工作，因为我创建了一个带有类组件的Codepen，但更糟糕的是，我不知道为什么，因为它遵循相同的逻辑


无论如何，这是我的代码和钩子。css与codepen上的css相同：

import React, { Fragment } from 'react'

import './ProgressBar.css'


const ProgressBar = props => {

let [sqSize, setSqSize] = React.useState(30)
let [percentage, setPercentage] = React.useState(0)
let [strokeWidth, setStrokeWidth] = React.useState(3)

let [trigger, setTrigger] = React.useState(false)
let [barIndex, setBarIndex] = React.useState(0)

let bars = Array(props.bar).fill(1)
let timer = 3000


const barTriggerHandler = () => {
    setTrigger(!trigger)
}


if (trigger) {
    setTimeout(() => {
        percentage < 99 ? setPercentage(percentage + 1) : setPercentage(0)
    }, timer / 100);

    setTimeout(() => {
        console.log(percentage)
        barIndex < bars.length - 1 ? setBarIndex(barIndex + 1) : setBarIndex(0)
    }, timer);
    
}

// SVG centers the stroke width on the radius, subtract out so circle fits in square
const radius = (sqSize - strokeWidth) / 2;
// Enclose cicle in a circumscribing square
const viewBox = `0 0 ${sqSize} ${sqSize}`;
// Arc length at 100% coverage is the circle circumference
const dashArray = radius * Math.PI * 2;
// Scale 100% coverage overlay with the actual percent
const dashOffset = dashArray - dashArray * percentage / 100;
// console.log(dashOffset)

return (
    <Fragment>
        { bars.map((bar, i) => {
            return <svg
                        key={i}

                        width={sqSize}
                        height={sqSize}
                        viewBox={viewBox}

                        onClick={() => barTriggerHandler()}
                    >
                        { i === barIndex ?  
                            <Fragment>
                                <circle
                                    className="circle-progress"
                                    cx={sqSize / 2}
                                    cy={sqSize / 2}
                                    r={radius}
                                    strokeWidth={`${strokeWidth}px`}
                                    // Start progress marker at 12 O'Clock
                                    transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
                                    style={{
                                        strokeDasharray: dashArray,
                                        strokeDashoffset: dashOffset
                                    }} 
                                /> 
                            </Fragment>
                        : null }
                        <circle
                            className="circle-center"
                            cx="50%"
                            cy="50%"
                            r="3"
                        /> 
                        
                    </svg>
        }) }
    </Fragment>
);
}

export default ProgressBar

import React，{Fragment}来自“React”
导入“./ProgressBar.css”
const ProgressBar=props=>{
let[sqSize，setSqSize]=React.useState（30）
let[percentage，setPercentage]=React.useState（0）
let[strokeWidth，setStrokeWidth]=React.useState（3）
let[trigger，setTrigger]=React.useState（false）
让[barIndex，setBarIndex]=React.useState（0）
设条=数组（道具条）。填充（1）
设定时器=3000
常量barTriggerHandler=（）=>{
setTrigger（！trigger）
}
如果（触发器）{
设置超时（（）=>{
百分比<99？设置百分比（百分比+1）：设置百分比（0）
}，计时器/100）；
设置超时（（）=>{
console.log（百分比）
barIndex<钢筋长度-1？立根指数（barIndex+1）：立根指数（0）
}，定时器）；
}
//SVG将笔划宽度集中在半径上，减去，使圆与正方形相吻合
常数半径=（sqSize-冲程宽度）/2；
//将圆环围成一个正方形
const viewBox=`0${sqSize}${sqSize}`；
//100%覆盖率下的弧长为圆周长
常数dashArray=radius*Math.PI*2；
//用实际百分比缩放100%覆盖覆盖覆盖
常量dashOffset=dashArray-dashArray*百分比/100；
//console.log（dashOffset）
返回(
{bar.map（（bar，i）=>{
返回barTriggerHandler（）}
>
{i==barIndex？
我没有使用两个
setTimeout
而是只使用了一个。我删除了第二个，它用于将
1
添加到包含点的数组索引中，并将此步骤放在第一个
setTimeout
中，现在我只检查圆是否填充了99%，而不是检查进行平差的时间把圆圈换到下一个点

这是第一个逻辑：

if (trigger) {
    setTimeout(() => {
        percentage < 99 ? setPercentage(percentage + 1) : setPercentage(0)
    }, timer / 100);

    setTimeout(() => {
        barIndex < bars.length - 1 ? setBarIndex(barIndex + 1) : setBarIndex(0)
    }, timer);
    
}

if（触发器）{
设置超时（（）=>{
百分比<99？设置百分比（百分比+1）：设置百分比（0）
}，计时器/100）；
设置超时（（）=>{
barIndex<钢筋长度-1？立根指数（barIndex+1）：立根指数（0）
}，定时器）；
}

现在我要做的是：

if (trigger) {
    setTimeout(() => {
        percentage < 99 ? setPercentage(percentage + 1) : setPercentage(0)

        if (percentage === 99) {
             barIndex < bars.length - 1 ? setBarIndex(barIndex + 1) : setBarIndex(0)
        }

    }, timer / 100);        
}

if（触发器）{
设置超时（（）=>{
百分比<99？设置百分比（百分比+1）：设置百分比（0）
如果（百分比===99）{
barIndex<钢筋长度-1？立根指数（barIndex+1）：立根指数（0）
}
}，计时器/100）；
}

由于两个步骤都在同一个
setTimeout
内，因此不再存在任何间隔冲突