Javascript 如何在React JS中动态更新MaterialUI DataGrid表

以下是我试图做的事情的概要：

• 当用户单击某一行中的复选框时，该行不会被删除（通常用户会单击多行）
• 一旦用户点击“清除记录”按钮，没有复选框的所有记录都会被删除

---

我得到了一些关于如何做到这一点的一般性建议，并使用我得到的建议以及我自己的逻辑来提出一个实现。问题是，尽管我认为我的逻辑看起来不错，而且我的所有console.log语句看起来都不错，但是中的数据没有更新。顺便说一句，这是一个JSX文件&而不仅仅是一个普通的JS文件

我已经被困在这上面一天了，我真的被困在我的问题是什么/为什么这不起作用。谢谢你的帮助和建议

---

import React，{Component，useState}来自“React”；
从“@material ui/data grid”导入{DataGrid}”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/icons/Delete”导入DeleteIcon；
常量列=[
{字段：“id”，标题名：“id”，宽度：70}，
{字段：“名字”，标题名：“名字”，宽度：130}，
{字段：“姓氏”，标题名：“姓氏”，宽度：130}，
{字段：“年龄”，标题名：“年龄”，类型：“数字”，宽度：90}，
{字段：“全名”，标题名：“全名”，描述：“此列有一个值获取程序，不可排序。”，
可排序：false，
宽度：160，
估价师：（参数）=>
`${params.getValue（“firstName”）| |“”}${
params.getValue（“lastName”）||“
}`
},
{字段：“城市”，标题名：“城市”，宽度：100}，
{字段：“状态”，标题名：“状态”，宽度：100}
];
风险值数据=[
{
id:1，
姓：“雪”，
名字：“乔恩”，
年龄:35岁，
城市：“密尔沃基”，
州：“威斯康星州”
},
{
id:2，
姓：“兰尼斯特”，
名字：“瑟曦”，
年龄:42,，
城市：“杜布克”，
州：“爱荷华州”
},
{
id:3，
姓：“兰尼斯特”，
名字：“詹姆”，
年龄:45,，
城市：“阿普尔顿”，
州：“威斯康星州”
},
{
id:4，
姓：“斯塔克”，
名字：“雅利娅”，
年龄:16岁，
城市：“麦迪逊”，
州：“威斯康星州”
},
{
id:5，
姓氏：“Targaryenmnsdlfbsjbgjksbgksbfksfgbk”，
名字：“丹妮莉丝”，
年龄：空，
城市：“绿湾”，
州：“威斯康星州”
},
{
id:6，
姓氏：“Melisandre”，
名字：空，
年龄:150,，
城市：“圣安东尼奥”，
州：“德克萨斯州”
},
{
id:7，
姓：“Clifford”，
名字：“费拉拉”，
年龄:44,，
城市：“达拉斯”，
州：“德克萨斯州”
},
{
id:8，
姓氏：“弗朗西斯”，
名字：“罗西尼”，
年龄:36岁，
城市：“布鲁克林”，
州：“纽约”
},
{
id:9，
姓：“罗茜”，
名字：“哈维”，
年龄:65岁，
城市：“托莱多”，
州：“俄亥俄州”
},
{
id:10，
姓：“拉里”，
名字：“国王”，
年龄:105，
城市：“芝加哥”，
国家：“不平等”
},
{
id:11，
姓：“雪”，
名字：“乔恩”，
年龄:35岁，
城市：“密尔沃基”，
州：“威斯康星州”
},
{
id:12，
姓：“兰尼斯特”，
名字：“瑟曦”，
年龄:42,，
城市：“杜布克”，
州：“爱荷华州”
},
{
id:13，
姓：“兰尼斯特”，
名字：“詹姆”，
年龄:45,，
城市：“阿普尔顿”，
州：“威斯康星州”
},
{
身份证号码：14，
姓：“斯塔克”，
名字：“雅利娅”，
年龄:16岁，
城市：“麦迪逊”，
州：“威斯康星州”
},
{
身份证号码：15，
姓氏：“Targaryenmnsdlfbsjbgjksbgksbfksfgbk”，
名字：“丹妮莉丝”，
年龄：空，
城市：“绿湾”，
州：“威斯康星州”
},
{
身份证号码：16，
姓氏：“Melisandre”，
名字：空，
年龄:150,，
城市：“圣安东尼奥”，
州：“德克萨斯州”
},
{
身份证号码：17，
姓：“Clifford”，
名字：“费拉拉”，
年龄:44,，
城市：“达拉斯”，
州：“德克萨斯州”
},
{
身份证号码：18，
姓氏：“弗朗西斯”，
名字：“罗西尼”，
年龄:36岁，
城市：“布鲁克林”，
州：“纽约”
},
{
身份证号码：19，
姓：“罗茜”，
名字：“哈维”，
年龄:65岁，
城市：“托莱多”，
州：“俄亥俄州”
},
{
身份证号码：20，
姓：“拉里”，
名字：“国王”，
年龄:105，
城市：“芝加哥”，
国家：“不平等”
}
];
var Rowstokep=[]；
var rowsToBeDeleted=[]；
类ElgibleContracts扩展组件{
//const[rows，setRows]=useState（数据）；
//常量[deletedRows，setDeletedRows]=useState（[]）；
/*
*假设用户希望删除所有行，
*但情况并非如此，也会出现一些情况。
*/
setRowsToBeDeleted=（）=>{
对于（变量i=0；i{
//如果它已经存在，请将其删除-这意味着用户未选中它
if（包括（如数据id））{
对于（var i=0；ir.id==e.data.id）]；
//log（“所有行：+行”）；
};
/*
*此方法更新要显示的数据。
*/
handlePurge=（）=>{
//检查哪些行要删除，哪些行不删除。
对于（var j=0；jimport React, { Component, useState } from "react";
import { DataGrid } from "@material-ui/data-grid";
import Button from "@material-ui/core/Button";
import DeleteIcon from '@material-ui/icons/Delete';
const columns = [
  { field: "id", headerName: "ID", width: 70 },
  { field: "firstName", headerName: "First name", width: 130 },
  { field: "lastName", headerName: "Last name", width: 130 },
  { field: "age", headerName: "Age", type: "number", width: 90 },
  { field: "fullName", headerName: "Full name", description: "This column has a value getter and is not sortable.", 
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.getValue("firstName") || ""} ${
        params.getValue("lastName") || ""
      }`
  },
  { field: "city", headerName: "City", width: 100 },
  { field: "state", headerName: "State", width: 100 }
];

var data = [
  {
    id: 1,
    lastName: "Snow",
    firstName: "Jon",
    age: 35,
    city: "Milwaukee",
    state: "Wisconsin"
  },
  {
    id: 2,
    lastName: "Lannister",
    firstName: "Cersei",
    age: 42,
    city: "Dubuque",
    state: "Iowa"
  },
  {
    id: 3,
    lastName: "Lannister",
    firstName: "Jaime",
    age: 45,
    city: "Appleton",
    state: "Wisconsin"
  },
  {
    id: 4,
    lastName: "Stark",
    firstName: "Arya",
    age: 16,
    city: "Madison",
    state: "Wisconsin"
  },
  {
    id: 5,
    lastName: "Targaryenmnsdlfbsjbgjksbgksbfksfgbk",
    firstName: "Daenerys",
    age: null,
    city: "Green Bay",
    state: "Wisconsin"
  },
  {
    id: 6,
    lastName: "Melisandre",
    firstName: null,
    age: 150,
    city: "San Antonio",
    state: "Texas"
  },
  {
    id: 7,
    lastName: "Clifford",
    firstName: "Ferrara",
    age: 44,
    city: "Dallas",
    state: "Texas"
  },
  {
    id: 8,
    lastName: "Frances",
    firstName: "Rossini",
    age: 36,
    city: "Brooklyn",
    state: "New York"
  },
  {
    id: 9,
    lastName: "Roxie",
    firstName: "Harvey",
    age: 65,
    city: "Toledo",
    state: "Ohio"
  },
  {
    id: 10,
    lastName: "Larry",
    firstName: "King",
    age: 105,
    city: "Chicago",
    state: "Illiniois"
  },
  {
    id: 11,
    lastName: "Snow",
    firstName: "Jon",
    age: 35,
    city: "Milwaukee",
    state: "Wisconsin"
  },
  {
    id: 12,
    lastName: "Lannister",
    firstName: "Cersei",
    age: 42,
    city: "Dubuque",
    state: "Iowa"
  },
  {
    id: 13,
    lastName: "Lannister",
    firstName: "Jaime",
    age: 45,
    city: "Appleton",
    state: "Wisconsin"
  },
  {
    id: 14,
    lastName: "Stark",
    firstName: "Arya",
    age: 16,
    city: "Madison",
    state: "Wisconsin"
  },
  {
    id: 15,
    lastName: "Targaryenmnsdlfbsjbgjksbgksbfksfgbk",
    firstName: "Daenerys",
    age: null,
    city: "Green Bay",
    state: "Wisconsin"
  },
  {
    id: 16,
    lastName: "Melisandre",
    firstName: null,
    age: 150,
    city: "San Antonio",
    state: "Texas"
  },
  {
    id: 17,
    lastName: "Clifford",
    firstName: "Ferrara",
    age: 44,
    city: "Dallas",
    state: "Texas"
  },
  {
    id: 18,
    lastName: "Frances",
    firstName: "Rossini",
    age: 36,
    city: "Brooklyn",
    state: "New York"
  },
  {
    id: 19,
    lastName: "Roxie",
    firstName: "Harvey",
    age: 65,
    city: "Toledo",
    state: "Ohio"
  },
  {
    id: 20,
    lastName: "Larry",
    firstName: "King",
    age: 105,
    city: "Chicago",
    state: "Illiniois"
  }
];

var rowsToKeep = [];
var rowsToBeDeleted = [];

class ElgibleContracts extends Component {
  //const [rows, setRows] = useState(data);
  //const [deletedRows, setDeletedRows] = useState([]);

  /*
  * It's assumed that the user will want to delete all the rows,
  * but there will be scenarios when that's not the case.
  */
  setRowsToBeDeleted = () => {
    for (var i = 0; i < data.length; i++){
      rowsToBeDeleted.push(data[i].id);
    }
    rowsToBeDeleted = [...new Set(rowsToBeDeleted)]; //Did this because clicking the button twice will make doubles appear for each row
    
  };

  /*
   * This method fires off when the checkbox is clicked for a given row.
  */
  handleRowSelection = (e) => {
    // remove it if it's already present - this means the user unchecked it
    if (rowsToKeep.includes(e.data.id)){
      for(var i = 0; i < rowsToKeep.length; i++){ 
        if (rowsToKeep[i] === e.data.id){ 
          rowsToKeep.splice(i, 1); 
        }
      }
    } else {
      // user clicked it - add it to the list of rows to keep.
      rowsToKeep.push(e.data.id);
    }

    this.setRowsToBeDeleted();
    console.log("Rows to Keep: " + rowsToKeep);
    //setDeletedRows([...deletedRows, ...rows.filter((r) => r.id === e.data.id)]);
    //console.log("All rows: " + rows);
  };

  /*
  * This method updates the data that's to be displayed.
  */
  handlePurge = () => {
    // Check to see what rows are to be deleted and which ones aren't.
    for (var j = 0; j < rowsToKeep.length; j++){
      if (rowsToBeDeleted.includes(rowsToKeep[j])){
        // delete it from 'rows to be deleted' array
        console.log("Found:" + rowsToKeep[j]);
        while(rowsToBeDeleted.indexOf(rowsToKeep[j]) !== -1) {
          rowsToBeDeleted.splice(rowsToBeDeleted.indexOf(rowsToKeep[j]), 1)
        }
      } else {
        // do nothing
      }
    } 

    // remove it from the data set. Just used ID of 1 in this case to test whether or not it would work
    data = data.filter(function(item) { 
      return item.id !== 1;  
    });
    
    console.log("Rows to Delete: " + rowsToBeDeleted);
    console.log("Here are deleted items",rowsToBeDeleted);
  };

  render(){
    return (
    <div style={{ textAlign: "center" }}>
      <h1 style={{ fontFamily: "Stone" }}>Elgible Contracts</h1>
      <span className="horizontal-line" />
      <div className="centerDiv" style={{ height: 380, width: 950 }}>
        <DataGrid
          rows={data}
          columns={columns}
          pageSize={10}
          checkboxSelection
          onRowSelected={this.handleRowSelection}
        />
      </div>
      <br />
      <Button variant="contained" color="primary" startIcon={<DeleteIcon />} style={{textTransform: "none"}} onClick={this.handlePurge}>
        Purge Records
      </Button>
    </div>
  );
};
}

export default ElgibleContracts;

class ElgibleContracts extends Component {
  //const [rows, setRows] = useState(data); <-- this will not work in class component
  //const [deletedRows, setDeletedRows] = useState([]); <-- this will not work in class component

  state = {
    data: data // use state class property instead
  };

let data_to_be_kept = this.state.data.filter(function (item) {
  return rowsToBeDeleted.includes(item.id) === false;
});

this.setState({
  data: data_to_be_kept
});

<DataGrid
  rows={this.state.data}
  columns={columns}
  pageSize={10}
  checkboxSelection
  onRowSelected={this.handleRowSelection}
/>