在 React 中创建简单的自定义进度条

Question

我正在尝试使用 CSS 和 setInterval 在 React 中创建我的简单进度条。它在 10% 后无法正常工作。有谁知道为什么会这样？谢谢

import React, {useState, useEffect} from 'react';

const Loading = () => {

    const [percentage, setPercentage] = useState(0);

    const containerStyles = {
        height: 20,
        width: '100%',
        backgroundColor: "#e0e0de",
        borderRadius: 50,
        margin: 50
    }

    const fillerStyles = {
        height: '100%',
        width: `${percentage.toString()}%`,
        backgroundColor: 'red',
        borderRadius: 'inherit',
        textAlign: 'right'
    }

    const labelStyles = {
        padding: 5,
        color: 'white',
        fontWeight: 'bold'
    }

    useEffect(() => {
        const newPercentage = parseInt(percentage) + 1;
        setInterval(() => setPercentage(newPercentage), 1000);
    }, [percentage])

    return (
        <div style={containerStyles}>
            <div style={fillerStyles}>
                <span style={labelStyles}>{percentage}%</span>
            </div>
        </div>
    )
}

export default Loading;

Answer 1

你应该把你的间隔存储在一个常量中，每次使用清理函数清除最后一个间隔。

我还会更改您处理 setPercentage 的方式并使用超时而不是间隔

像这样：



useEffect(() => {
     const timeoutID = setTimeout(() => 
        setPercentage(prevPercentage => prevPercentage + 1)
      , 1000);
   
      return () => clearTimeout(timeoutID);
  }, [setPercentage]);

在 React 中创建简单的自定义进度条

Create simple custom progression bar in React

reactjs

setinterval