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

Question

I created delete function for delete button but it doesn't work. I looked at the example and the code is almost identical but somehow it's not working out for me. Are there any suggestions?

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;

Here is the data for userRows. It has it's id property which i use it for delete function.

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: "1snow@gmail.com",
    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: "2snow@gmail.com",
    status: "passive",
    age: 42
  }
];

Here is the data for 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 : use state value (data) in rows props in the Datagrid

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

second :

Q) How to update state value in react js?

In delete function you are updating the state value and to update the state this approach is not the correct one. correct way to update the state is this

1. use callback function where you get the previous value of the state

2. then filter the array as you have done

3. then destructure the array to create the clone of that array to update the state value

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