如何显示React Axios进度条？

npm install axios react-progressbar

import React, { useState } from 'react';
import axios from 'axios';
import ProgressBar from 'react-progressbar';

const MyComponent = () => {
  const [progress, setProgress] = useState(0);

  // 其他组件代码...

  return (
    <div>
      <ProgressBar completed={progress} />
      {/* 其他组件内容 */}
    </div>
  );
};

const MyComponent = () => {
  const [progress, setProgress] = useState(0);

  const handleRequest = () => {
    axios.get('https://example.com/api/data', {
      onDownloadProgress: (progressEvent) => {
        const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        setProgress(percentage);
      },
    })
      .then((response) => {
        // 处理响应数据
      })
      .catch((error) => {
        // 处理错误
      });
  };

  return (
    <div>
      <ProgressBar completed={progress} />
      <button onClick={handleRequest}>发送请求</button>
    </div>
  );
};