如何在react中正确删除datatable.net中的项目？

Question

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
// import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min';
import "datatables.net-dt/js/dataTables.dataTables";
import "datatables.net-dt/css/dataTables.dataTables.min.css";
import "datatables.net-buttons/js/buttons.colVis";
import "datatables.net-buttons/js/buttons.html5";
import "datatables.net-buttons/js/buttons.print";
import "datatables.net-buttons/js/dataTables.buttons";
// import 'jszip';
import JSZip from 'jszip'; 
import 'pdfmake';
// import 'pdfmake/build/pdfmake';
// import 'pdfmake/build/vfs_fonts';
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

window.JSZip = JSZip;
pdfMake.vfs = pdfFonts.pdfMake.vfs;


const MasterDataTable = (prop) => {
  const { tableId, tableData } = prop
  const dataTableRef = useRef(null);

  useEffect(() => {
    console.log("tableData",tableData)

 
        if(tableData?.length > 0){

        dataTableRef.current = $(`#${tableId}`).DataTable({
            pagingType: 'full_numbers',
            pageLength: 10,
            processing: true,
            
            destroy:true,
            retrieve:true,
            
            dom: 'Bfrtip',
            // buttons: ['copyHtml5', 'csvHtml5', 'excelHtml5', 'pdfHtml5', 'print'],
            orientation: tableData[0] && tableData[0].length > 4 ? 'landscape' : 'portrait', // Set orientation based on column count
            pageSize: tableData[0] && tableData[0].length > 4 ? 'A3' : 'A4', // Adjust page size based on the number of columns
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                      columns: ':visible', 
                      modifier: {
                        page: 'all'
                      },
                      format: {
                          body: (data, row, column, node) => {
                            console.log(3)
                          // Dynamically handle the Status column
                              if ($(node).closest('td').hasClass('status-column')) {
                              return $(data).find('input').is(':checked') ? 'True' : 'False';
                              }
                              return $(node).text().trim();
                          }
                      },
                      stripHtml: true,
                    },                  
                },
                {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible',     
                    modifier: {
                    page: 'all'
                    },
                    format: {
                      body: (data, row, column, node) => {
                      // Dynamically handle the Status column
                        if ($(node).closest('td').hasClass('status-column')) {
                        return $(data).find('input').is(':checked') ? 'True' : 'False';
                        }
                        return $(node).text().trim();
                      }
                    },
                    stripHtml: true,
                }
                },
                {
                  extend: 'excelHtml5',
                  exportOptions: {
                    columns: ':visible',
                    modifier: {
                      page: 'all'
                    },
                    format: {
                      body: (data, row, column, node) => {
                      // Dynamically handle the Status column
                        if ($(node).closest('td').hasClass('status-column')) {
                        return $(data).find('input').is(':checked') ? 'True' : 'False';
                        }
                        return $(node).text().trim();
                      }
                    },
                    stripHtml: true,
                  }
                },
                {
                  extend: 'pdf',
                  exportOptions: {
                    columns: ':visible', 
                    stripHtml: false,
                    modifier: {
                      page: 'all'
                    }
                  }
                },
                {
                    extend: 'print',
                    exportOptions: {
                      columns: ':visible', 
                      stripHtml: false,
                      modifier: {
                        page: 'all'
                      }
                    }
                  },
                'colvis',

              ],
              initComplete: ()=> {
                // $(`#${tableId}`).addClass('table table-bordered table-hover toggle-circle custom-table table');
            }
            });
            console.log(`DataTable with ID #${tableId} initialized.`);
  
    
    }



  }, [tableId, tableData]);

};

export default MasterDataTable;

以上是数据表的通用代码，将在不同的表上使用。问题是，当我从表中删除项目时，会出现以下错误：

未捕获NotFoundError：无法在“Node”上执行“removeChild”：要删除的节点不是此节点的子节点。

问题似乎是我直接操作 DOM，所以当表中少一项时就会出现此错误。

请帮助解决此错误并正确从表中删除该项目。

编辑： 我在表的 tr 标记中使用了唯一的 key={item?.id} ，它解决了错误。但现在的问题是，即使删除项目后，表中的项目也没有正确删除。例如，删除一个项目后，再次转到下一页和上一页（该项目所在的位置），它会再次重新出现在表格中。当然，在硬刷新时，表会更新。但这不是我想要的。有什么帮助吗？

编辑：以前没有 datatables.net 库的情况下，从表中删除项目可以完美地工作。但现在它不能正常工作。我想问题是数据表在销毁后没有正确刷新/重新初始化。

Answer 1

删除所有销毁功能（包括

destroy:true

）就可以了。基本上所需要的只是

retieve: true

并且没有任何销毁功能。

但是出现了另一个问题，那就是在分页中，对于删除的项目，它会说：

显示 5 条条目中的 1 至 5 条

相反，它应该说：

显示 4 条条目中的 1 至 4 条

因为 1 个条目已被删除。

会调查一下。我猜其余的都可以正常工作，无需分页。