删除按钮在我的反应应用程序上不起作用

Question

我为删除按钮创建了删除函数，但它不起作用。我看了这个例子，代码几乎是相同的，但不知何故，它不适合我。有什么建议吗?

import { useState } from "react";
import "./userList.scss";
import { DataGrid } from "@mui/x-data-grid";
import { userColumns, userRows } from "../../datatablesource";
import { Link } from "react-router-dom";
const Datatable = () => {
const [data, setData] = useState(userRows);
const deleteData = id => {
setData(data.filter(item => item.id !== id));
};
const actionColumn = [
{
field: "action",
headerName: "Action",
width: 200,
renderCell: params => {
return (
<div className="cellAction">
<Link to="/users/profile" style={{ textDecoration: "none" }}>
<button className="viewButton">View</button>
</Link>
<button className="deleteButton" onClick={() => deleteData(params.row.id)}>
Delete
</button>
</div>
);
}
}
];
return (
<div className="datatable">
<DataGrid rows={userRows} columns={userColumns.concat(actionColumn)} pageSize={5} rowsPerPageOptions={[5]} checkboxSelection disableSelectionOnClick />
</div>
);
};
export default Datatable;

下面是userRows的数据。它有它的id属性，我用它来删除函数

export const userRows = [
{
id: 1,
username: "Snow",
img: "https://images.pexels.com/photos/1820770/pexels-photo-1820770.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
status: "active",
email: "[e-mail]",
age: 35
},
{
id: 2,
username: "Jamie Lannister",
img: "https://images.pexels.com/photos/1820770/pexels-photo-1820770.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
email: "[e-mail]",
status: "passive",
age: 42
}
];

下面是userColumns的数据:

export const userColumns = [
{
field: "id",
headerName: "ID",
width: 70
},
{
field: "user",
headerName: "Username",
width: 250,
renderCell: params => {
return (
<div className="cellWithImg">
<img className="cellImg" src={params.row.img} alt="avatar" />
{params.row.username}
</div>
);
}
},
{
field: "email",
headerName: "Email",
width: 280
},
{
field: "age",
headerName: "Age",
width: 100
},
{
field: "status",
headerName: "Status",
width: 160,
renderCell: params => {
return <div className={`cellWithStatus ${params.row.status}`}>{params.row.status}</div>;
}
}
];

Answer 1

First:在Datagrid的行props中使用状态值(data)

<DataGrid rows={data} columns={userColumns.concat(actionColumn)} pageSize={5} rowsPerPageOptions={[5]} checkboxSelection disableSelectionOnClick />

第二个:

Q如何在react js中更新状态值

在delete函数中，你正在更新状态值，而要更新状态，这种方法是不正确的。更新状态的正确方法如下

1. 使用回调函数获取状态的前一个值

2. 然后像

   那样过滤数组

3. 然后解构该数组以创建该数组的克隆来更新状态值

   const deleteData = (id) => {
   setData((d) => {
   return [...d.filter((item) => item.id !== id)];
   });}