无法从react material ui数据网格列表中删除项目，可能是什么问题

Question

我有一个基本的客户列表。我正在使用材质UI DataGrid来渲染列表。尽管每个列表都有编辑和删除项目的按钮。但我无法从列表中删除该项目，即使当我尝试控制台时，我得到了客户的特定id。这是我在codesandbox中的完整代码的链接

CustomerList.js(我用注释突出显示了我的代码，这样您就可以轻松地跳转到该特定区域(

import React, { useState, useEffect } from "react";
import { Button, Grid, Typography, Box } from "@material-ui/core";
import { DataGrid } from "@material-ui/data-grid";
import { useStyles } from "./CustomerListStyle";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { useHistory } from "react-router-dom";
// my initial data which I'm passing to state names customers
const customerData = [
{ id: 1, name: "Customer 1", gender: "Male", email: "[e-mail]" },
{ id: 2, name: "Customer 2", gender: "Male", email: "[e-mail]" },
{ id: 3, name: "Customer 3", gender: "Female", email: "[e-mail]" }
];
const CustomerList = () => {
const classes = useStyles();
const [customers, setCustomers] = React.useState(customerData);
const [open, setOpen] = React.useState(false);
const [name, setName] = React.useState("");
const [gender, setGender] = React.useState("");
const [email, setEmail] = React.useState("");
// just to render MUI DataGrid
const columns = [
{ field: "id", headerName: "ID", width: 70 },
{ field: "name", headerName: "Name", width: 200 },
{
field: "gender",
headerName: "Gender",
width: 150
},
{
field: "email",
headerName: "Email",
description: "This column has a value getter and is not sortable.",
width: 250
},
{
field: "action",
headerName: "Action",
width: 250,
// Important: passing id from customers state so I can delete or edit each user
renderCell: (id) => (
<>
<Button
style={{
backgroundColor: "#ffcc00",
marginRight: 40,
padding: "3px 35px"
}}
variant="contained"
color="primary"
type="submit"
>
Edit
</Button>
<Button
style={{
backgroundColor: "#e8605d",
padding: "3px 35px"
}}
onClick={() => handleDelete(id)}
variant="contained"
color="primary"
type="submit"
>
Delete
</Button>
</>
)
}
];
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
// Issue: not deleting the row from table
const handleDelete = (id) => {
setCustomers(customers.filter((user) => user.id !== id));
console.log(id);
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(e.value);
const newCustomer = {
id: Math.floor(Math.random() * 999),
name: name,
gender: gender,
email: email
};
setCustomers([...customers, newCustomer]);
console.log(`user data is ${newCustomer}`);
console.log(customers);
};
return (
<>
<Grid
container
direction="row"
justify="center"
alignItems="center"
className={classes.listHeader}
>
<Grid item md={8}></Grid>
<Grid item md={4}>
<Button
className={classes.btn}
onClick={handleClickOpen}
variant="contained"
color="primary"
type="submit"
>
Add New Customer
</Button>
<Dialog
disableBackdropClick
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Add New Customer</DialogTitle>
<form noValidate onSubmit={handleSubmit}>
<DialogContent>
<TextField
value={name}
onChange={(event) => setName(event.target.value)}
autoFocus
margin="dense"
id="name"
label="Name"
type="text"
fullWidth
/>
<TextField
value={gender}
onChange={(event) => setGender(event.target.value)}
margin="dense"
id="gender"
label="Gender"
type="text"
fullWidth
/>
<TextField
value={email}
onChange={(event) => setEmail(event.target.value)}
margin="dense"
id="email"
label="Email Address"
type="email"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary" type="submit">
Add
</Button>
</DialogActions>
</form>
</Dialog>
</Grid>
</Grid>
<div className={classes.customerList}>
<DataGrid
rows={customers}
columns={columns}
pageSize={5}
checkboxSelection={false}
disableSelectionOnClick={true}
/>
</div>
</>
);
};
export default CustomerList;

Answer 1

您在handleDelete中调用的id不是id，而是一个客户对象。用之类的东西替换它

const handleDelete = (clickedUser) => {
setCustomers(customers.filter((user) => user.id !== clickedUser.id));
console.log(clickedUser.id);
};

Answer 2

• 您没有转发"id"；变成"；onClick"事件

<Button
style={{
backgroundColor: "#e8605d",
padding: "3px 35px"
}}
onClick={() => handleDelete(id)}  // here
variant="contained"
color="primary"
type="submit"
>
Delete
</Button>

• 我应该是onClick={(id(=>handleDelete(id(}

Answer 3

@possums的解决方案(相当(有效，您必须停止鼠标事件传播以避免No row with id # found异常。

将删除按钮替换为：

<Button
style={{
backgroundColor: "#e8605d",
padding: "3px 35px"
}}
onClick={(e) => {
e.stopPropagation()
handleDelete(id)
}
}
variant="contained"
color="primary"
type="submit"
>
Delete
</Button>

并保留删除处理程序建议的

const handleDelete = (clickedUser) => {
setCustomers(customers.filter((user) => user.id !== clickedUser.id));
console.log(clickedUser.id);
};