点击按钮展示Material UI环形不确定进度条的实现问题咨询

1. 引入依赖并声明状态 #

先从MUI引入需要的组件，然后在函数组件内声明加载状态、存储导入结果的状态，以及成功提示状态：

import { useState } from 'react';
import { CircularProgress, Button, Snackbar, Alert } from '@mui/material';

// 你的组件内部
const YourComponent = () => {
  const [isImporting, setIsImporting] = useState(false);
  const [importedData, setImportedData] = useState([]);
  const [showSuccess, setShowSuccess] = useState(false);

  // 其他原有逻辑

2. 修改按钮点击的异步逻辑 #

调整原有的fetch流程，请求开始前开启加载状态，请求完成（无论成功失败）都关闭加载状态，成功后更新导入结果、触发成功提示：

<Button
  variant="contained"
  color="primary"
  size="large"
  style={{ marginTop: '1em' }}
  disabled={isImporting}
  onClick={async () => {
    setIsImporting(true);
    const tempArr = [];
    try {
      const stream = await fetch(
        'https://othersite.org/api/games/user/neio',
        { headers: { Accept: 'application/x-ndjson' } }
      );
      const onMessage = obj => tempArr.push(obj);
      await readStream(onMessage)(stream);
      setImportedData(tempArr);
      setShowSuccess(true);
    } catch (err) {
      console.error('导入失败', err);
      // 可自行添加错误提示逻辑
    } finally {
      setIsImporting(false);
    }
  }}
>
  {isImporting ? <CircularProgress size={20} color="inherit" style={{marginRight: '8px'}}/> : null}
  Import Games
</Button>

3. 添加成功提示组件 #

在JSX的任意位置（通常放在组件最末尾）添加成功提示弹窗：

<Snackbar 
  open={showSuccess} 
  autoHideDuration={3000} 
  onClose={() => setShowSuccess(false)}
  anchorOrigin={{vertical: 'top', horizontal: 'center'}}
>
  <Alert severity="success">游戏导入完成，共导入{importedData.length}条数据</Alert>
</Snackbar>

• 你需要在DOM中额外添加节点吗？
  两种方案可选：
  • 如果你选择把进度条放在按钮内部，不需要额外加独立节点，只需要修改按钮内部的渲染内容即可，同时还可以通过disabled属性禁止用户重复点击，更推荐这种方案。
  • 如果你想把进度条放在页面其他独立位置，就需要额外添加CircularProgress节点，通过isImporting状态控制显隐即可。
• 其他可行方案：
  如果导入时间较长，你可以选择全屏遮罩的加载样式，避免用户在导入过程中操作页面其他内容，只需要在isImporting为true时渲染一个半透明的全屏固定定位容器，内部居中放置CircularProgress即可。

内容的提问来源于stack exchange，提问作者Jon