javascript - 使用 React 从用户中删除项目后重新加载用户

问题描述

使用 React.Js 尝试从列表末尾删除用户时，已删除的用户将替换为列表中的最后一项。只有在页面刷新时，被删除的用户才会真正消失并且用户列表会更新。后端可以工作，因为我可以删除用户，但我需要刷新才能看到新的更新

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});



const combinedStyles = combineStyles(popupStyles, UserPageStyles);

export default function RemoveUser(props) {
    const global = useContext(GlobalContext);
    const [open, setOpen] = React.useState(false);
    let org = {}
    if (global.state.selectedOrg && Object.keys(global.state.selectedOrg).length !== 0) {
        org = global.state.selectedOrg
    } else if (global.state.defaultOrg && Object.keys(global.state.defaultOrg).length !== 0) {
        org = global.state.defaultOrg
    }
    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
        props.handleClose();
    };
    const handleSubmit = async () => {
        let result = await global.api.removeAccount({
            id: props.account._id,
            role: global.state.user && global.state.user.document.roles[0] || '',
            accountRole: props.type === 'patients' ? 'patient' : props.type === 'providers' ? 'doctor' : props.type === 'moas' ? 'oa' : props.type === 'admins' ? 'healthOrgAdmin' : props.type,
            org: org._id,
            username: props.account.username,
        });
        if (result && result.status === 200) {
            handleClose();
            props.refresh();
        } else {
            alert('Unable to remove account.');
        }
    }

    const classes = combinedStyles();

    return (
        <div>
            <ButtonBase className={props.className} onClick={handleClickOpen}> <Typography className={classes.typography}>Remove</Typography></ButtonBase>

            <Dialog
                open={open}
                TransitionComponent={Transition}
                keepMounted
                onClose={handleClose}
                aria-labelledby="alert-dialog-slide-title"
                aria-describedby="alert-dialog-slide-description"
            >

                <DialogTitle className={classes.dialogTitle} id="alert-dialog-slide-title">Remove Account<IconButton onClick={handleClose} className={classes.dialogClose} children={<ClearIcon />} /> </DialogTitle>
                <DialogContent>
                    <DialogContentText className={classes.contentText}>
                        Are you sure you want to remove {props.account.contact_name}'s account? You will not be able to revert this.
                    </DialogContentText>
                </DialogContent>

                <DialogActions className={classes.dialogAction}>
                    <Button onClick={handleClose} color="primary" className={classes.actionBtn}>
                        Cancel
                    </Button>
                    <Button onClick={handleSubmit} color="primary" className={classes.actionBtn}>
                        Yes
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

标签： javascriptreactjsreload

javascript - 使用 React 从用户中删除项目后重新加载用户

问题描述

解决方案

推荐阅读