使用 MERN 和 CRUD 操作时如何修复此层多次出现

如何解决使用 MERN 和 CRUD 操作时如何修复此层多次出现

我正在使用 MERN CRUD 创建一个数据表，但是当用户点击删除时，我想要一个图层（模态）出现，然后可以选择单击是或否。我遇到的问题是删除按钮在同一个 ID 中出现不止一次。我怎样才能做到它不是那样的地方，只有一个删除按钮？下面是该层对应的所有时间。如果有人可以帮助我更好地了解如何执行此操作或修复它。谢谢 This is an Image of what the buttons look like for reference of what is happening

render() {

        const deletebtn = (
        <Box>
            {this.state.alumnis.map((alumni,index) => (
        <Button 
            primary
            icon={<Trash />}
            label="delete"
            onClick={() => this._onClick(alumni._id)}
            
            />
            ))}
            </Box>
            );

        const layer = (this.state.layerActive) ? (
            <Box>
                {this.state.alumnis.map((alumni,index) => (
                <Layer onClose={this._onLayerClose}  align="center" onClickOutside={this._onLayerClose} onesc={this._onLayerClose} plain animate="slide">
                    <Box pad="large" background="pink" round>
                        <heading level={4} alignSelf="center">
                            Are you sure you want to delete?
                        </heading>
                        <Box direction="row" alignSelf="center" pad={{top: "small"}} gap="small">
                            <Button label="no" color="critical-status" type="button" primary color="black" onClick={this._onLayerClose} />
                            <Button label="yes" color="#b22222" type="button" primary onClick={() => this.onDelete(alumni._id)} />
                        </Box>
                    </Box>
                </Layer>
            ))}
            </Box>
        ) : undefined;

constructor(props) {
        super(props);
        this.state={
        alumnis: [],layerActive: false,name: ""
        };
        
        this._onClick = this._onClick.bind(this);
        this._onLayerClose = this._onLayerClose.bind(this);
        
    }
    componentDidMount(){
    const id = this.props.match.params.id;
    axios.get(`http://localhost:5000/alumnis/detail/${id}`).then((res) => {
        if(res.data.success){
            this.setState({
                name: res.data.alumni.name
            })
        }
    })
    this.getAlumnis()
    }

    _onClick(){
        this.setState({layerActive: true});
    }
    _onLayerClose(){
        this.setState({layerActive: false});
    }

<TableBody >
            
            {this.state.alumnis.map((alumni,index) => (
                <TableRow>
                
                    <TableCell ><Text size="large" >{index}</Text></TableCell>
                
                <TableCell align="center" alignSelf="center" alignContent="center">
                    <Text size="large">{alumni.name}</Text>
                </TableCell >
                <TableCell><Text size="large">{alumni.year}</Text></TableCell >
                <TableCell><Text size="large">{alumni.accomplishment}</Text></TableCell >
                <TableCell align="center"><Text size="large">{alumni.education}</Text></TableCell >
                <TableCell align="center"><Text size="large">{alumni.career}</Text></TableCell >
                <TableCell align="center"><Text size="large">{alumni.message}</Text></TableCell >
                <TableCell gap="xsmall" direction="row">
                        <Button href={`/edit/${alumni._id}`} color="#FFAA15" >
                            <Box direction="row" align="center" alignSelf="center" gap="xxsmall">
                                <Edit color="#FFAA15" />
                                <Text size="large">Edit</Text>
                            </Box>
                        </Button>

                        <Box>
                            {layer}                    
                        </Box>
                        <Box>
                            {deletebtn}
                        </Box>
                    

    
                       
                </TableCell >
                </TableRow >
            ))}
            </TableBody>