Question

我正在为模型CRUD操作开发一个React功能组件，该组件将在模型窗体上呈现“保存”和“删除”按钮，并且当用户单击“保存”或“删除”按钮并隐藏该按钮时，我试图显示等待指示器。该过程完成时的指示符。

我正在使用material-ui React组件库，对于等待指示符，我正在使用Backdrop组件。

组件属性是保存和删除回调，并由父组件设置。

我添加了一个布尔状态来显示/隐藏此背景，但是由于react中的setState是异步的，因此未显示等待指示符。那么我该如何实现呢？

这是我的组件：

export default function ModelControls({onSave, onDelete}) {

    const [wait, setWait] = useState(false);

    const saveClick = () => {
        setWait(true);
        const retId = onSave();
        setWait(false);
        ...
    };

    return (
        <Container maxWidth={"xl"}>
            <Grid container spacing={2}>
                <Grid item xs={6}>
                    <Box display="flex" justifyContent="flex-end">
                        <Box component="span">
                            <Button size="small" color="primary" onClick={saveClick}>
                                <SaveIcon />
                            </Button>
                        </Box>
                    </Box>
                </Grid>
            </Grid>
            <Backdrop open={wait}>
                <CircularProgress color="primary" />
            </Backdrop>
        </Container>
    );
}

Answer 1

只需创建函数async，然后在await函数前面添加save。

const saveClick = async () => {
  setWait(true);
  const retId = await onSave();
  setWait(false);
};

Answer 2

感谢@Dipansh，您启发了我以下解决方案。

现在父级的onSave回调必须返回一个Promise对象

const saveClick = () => {
    setWait(true);
    onSave().then((retId) => {
        ...
        setWait(false);
    });
};

这种方式可以根据需要正常工作。

如何更新状态以等待React中的功能完成

2 个答案: