显示圆形不确定的进度按钮单击

Question

我有一个按钮，当点击运行一些代码，从另一个网站导入数据。最好有一个圆形不确定指示器(Material UI)，显示导入正在进行中，直到完成。

下面的代码显示了我正在运行的代码和一些jsx.

<Box mt={5} mb={5} width={1200}>
<Grid
container
justify="center"
spacing={2}
style={{ padding: '25px' }}
>
<Grid item xs={7}>
<Typography variant="h3" style={{ fontWeight: 600 }}>
List
</Typography>
<Typography variant="h5" style={{ marginTop: '2em' }}>
some text
</Typography>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginTop: '1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
let arrCollection = [];
const stream = fetch(
'https://othersite.org/api/games/user/neio',
{ headers: { Accept: 'application/x-ndjson' } }
);
const onMessage = obj => {
arrCollection.push(obj);
};
const onComplete = () =>
console.log('The stream has completed');
stream.then(readStream(onMessage)).then(onComplete);
console.log('arrCollection', arrCollection);
}}
>
Import Games
</Button>
</Grid>
</Grid>
</Box>

我不明白的是如何显示&;同时导入，然后显示完成。

这是指向循环不确定代码的链接:https://material-ui.com/components/progress/

我需要添加一个节点到Dom或其他东西吗?

Answer 1

如前所述，您可以使用state来管理它。像这样的代码应该可以工作

const [loading, setLoading] = useState(false);
<div>{loading ? <LoadingIndicator /> : ''}</div>
<Button
onClick={() => {
setLoading(true);
let arrCollection = [];
const stream = fetch('https://othersite.org/api/games/user/neio', {
headers: { Accept: 'application/x-ndjson' },
});
const onMessage = (obj) => {
arrCollection.push(obj);
};
const onComplete = () => console.log('The stream has completed');
stream.then(readStream(onMessage)).then(onComplete);
console.log('arrCollection', arrCollection);
setLoading(false);
}}
>
Import Games
</Button>