如何在react中使用SetInterval作为进度条

import React, { useState } from 'react';

function ProgressBar() {
  const [progress, setProgress] = useState(0);

  // 其他组件代码...

  return (
    // 进度条组件代码...
  );
}

export default ProgressBar;

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

function ProgressBar() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 更新进度条状态
      setProgress(prevProgress => prevProgress + 1);
    }, 1000);

    return () => {
      // 清除定时器
      clearInterval(intervalId);
    };
  }, []);

  // 其他组件代码...

  return (
    // 进度条组件代码...
  );
}

export default ProgressBar;

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

function ProgressBar() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setProgress(prevProgress => prevProgress + 1);
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <div>
      <div>当前进度：{progress}%</div>
      <div style={{ width: `${progress}%`, background: 'blue', height: '10px' }}></div>
    </div>
  );
}

export default ProgressBar;