当我使用 ReactJS 从数据表中删除行而不使用 Redux 或 Context 时，如何刷新数据表？

Posted 2023-02-19

【中文标题】当我使用 ReactJS 从数据表中删除行而不使用 Redux 或 Context 时，如何刷新数据表？

【英文标题】：How can I refresh datatable when I delete row from datatable with ReactJS without using Redux or Context?

【发布时间】：2022-01-15 11:50:27

【问题描述】：

我正在尝试在不使用“Redux”或类似的东西的情况下进行“CRUD”操作。我正在为数据表使用“react-bootstrap-table2-toolkit”。但是在删除列中的一行后，我无法更新“数据表”。

我的部门页面：

import columns from "../../columns/DepartmentColumns";
    const Department = () => 
    
      const [departments, setDepartments] = useState([]);
    
      useEffect(() => 
          getData()
      ,[])
      
     
    
      const getData = () => 
        getDepartments().then(x => setDepartments(x.allData))
      
    
     <ToolkitProvider
  keyField="id"
  search=true
  columns=columns
  data=departments
  wrapperClasses="table-responsive"
></ToolkitProvider>
   

我的部门栏目：

import  Button, Col, Row  from "@themesberg/react-bootstrap";
import React from "react";
import  Link  from "react-router-dom";
import  deleteDepartment  from "../services/DepartmentService";

 const deleteData = (id) => 
  deleteDepartment(id).then(x => x.statusText)


export default [
  
    dataField: "id",
    text: "ID",
    headerStyle: (column, colIndex) => 
      return  width: "20%" ;
    ,
  ,
  
    dataField: "name",
    text: "Department Name",
    headerStyle: (column, colIndex) => 
      return  width: "20%" ;
    ,
  ,
  
    dataField: "action",
    text: "Actions",
    formatter: (cell, row) => 
      const id = row.id
      return (
        <Row>
          <Col xs=12 lg=8 sm=12 className="mb-2">
            <Link to=`/department/$id`>
              <Button variant="warning" className="w-100">
                Detail
              </Button>
            </Link>
          </Col>
          <Col xs=12 lg=4 sm=12>
            <Button variant="danger" className="w-100" onClick=() => deleteData(id)>
              Delete
            </Button>
          </Col>
        </Row>
      );
    ,
    headerStyle: (column, colIndex) => 
      return  width: "20%" ;
    ,
  ,
];

我的删除服务：

const deleteDepartment = async (id) => 
    const response = await axios.delete(`/Departments/$id`)
    return
        statusText: response.statusText
    

我可以删除“列”页面中的“行”，但无法刷新“数据表”中的数据。因为它停留在“Department.js”页面上。 我能做什么？

我的数据表：

【参考方案1】：

您想在后端成功删除departments 后修改您的前端。将 deleteData 移动到您的 Department 组件中，然后在您成功收到它已被删除的消息后，将其从您的状态中删除。

const deleteData = (id) => 
  deleteDepartment(id).then((x) => 
    setDepartments(departments.filter(dept => dept.id !== id));
  )

如果有意义，您还可以在删除新删除的部门之前添加if x.statusText === 'Success' 之类的检查。

【讨论】：

那么如何从“DepartmentColumns”组件访问“Department”组件中的deleteData函数呢？

从DepartmentColumns组件中移除，添加到Department组件，并作为prop传递给DepartmentColumns组件。

那么如何将它作为参数传递呢？ Datatable columns 下面是如何捕获参数。 export default [ dataField: "id", text: "ID", headerStyle: (column, colIndex) => return width: "20%" ; , ,