Javascript ReaTjs PrimeStBar值不与StasePrimestsValm相媲美。

我目前正在使用

从'react sweet Progress'导入{Progress}
在我尝试从“reactstrap”导入{Progress}之前只使用引导4进度条

我有一个状态来维护progressValue，并使用audiohtml标记来调用在线音频src并播放它。在
timeupdate
eventListener期间，我在我的状态中更新我的progressValue，并通过将
的值设置为
this.state.progressValue
来反映它

class FooBar extends Component {
    state = {
         progressValue: 0
    }

    handleProgress = () => {
        this.currentTimeInterval = null;

        this.audio.onplay = () => {
            this.setState({
                progressValue: 0,
                play: true
            });

        this.audio.addEventListener('timeupdate', () => {
            this.setState({
                progressValue: Math.floor(this.audio.currentTime / this.audio.duration * 100)
            }, function() {
                console.log(this.state.progressValue);
            })
        }, true)

        this.audio.onpause = () => {
            clearInterval(this.currentTimeInterval);
        }
    }

    render() {
        return(
            <audio 
                ref={(audio) => { this.audio = audio }} 
                src={http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav} 
                autoPlay 
                onLoadedData={this.handleProgress}
            />
            <Progress value={this.state.progressValue} />
        );
    }
}

并尝试将100ms的时间间隔控制在一个较小的数字上，这使得时间间隔更近，但延迟仍然存在

3个问题：

1） 是什么导致了这种情况

2） 有办法解决这个问题吗

3） 如果答案为“否”，那么我是否可以使用其他组件来显示音频文件的进度？（不是默认的
控制来自音频标签的
）

谢谢大家!
 您发布的代码无法运行。另外，你能制作一个代码沙盒吗？它可以工作，但这与我正在播放的音频源有关（不是我在上面使用的默认音频源）。抱歉给你添麻烦了！
this.currentTimeInterval = setInterval(() => {
    this.setState({
        progressValue: Math.floor(this.audio.currentTime / this.audio.duration * 100)
     }))
 }, 100)