React中DataTables.net表格删除项报错及数据不更新问题

先搞定第一个removeChild报错 #

这个错误是React虚拟DOM和DataTables维护的真实DOM节点对不上导致的，你给<tr>加key={item?.id}的做法完全正确——这能让React精准识别每个表格行的身份，避免节点匹配混乱，报错自然就消失了。

核心问题：删完数据切分页，旧数据又出来 #

这是因为DataTables会缓存初始数据集和分页状态，你删除数据后，React更新了组件的数据源，但DataTables没察觉到变化，还在拿旧缓存数据展示。解决核心就是让DataTables在数据源变化时同步更新，要么销毁旧实例重建，要么直接用API刷新数据。

具体两种实现方案 #

方案1：监听数据源变化，销毁旧实例重建

假设你的组件结构大概是这样，按这个思路改：

import { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'datatables.net';

const GenericDataTable = ({ data, columns, onDelete }) => {
  const tableRef = useRef(null);
  const dtInstance = useRef(null);

  useEffect(() => {
    // 先销毁旧的DataTables实例，避免残留
    if (dtInstance.current) {
      dtInstance.current.destroy();
    }

    // 基于新数据初始化新实例
    if (tableRef.current) {
      dtInstance.current = $(tableRef.current).DataTable({
        data: data,
        columns: columns,
        // 这里放你的分页、排序等配置
      });
    }

    // 组件卸载时清理实例，防止内存泄漏
    return () => {
      if (dtInstance.current) {
        dtInstance.current.destroy();
      }
    };
  }, [data, columns]); // 数据源或列配置变了就重新初始化

  return (
    <table ref={tableRef} className="display">
      <thead>
        <tr>
          {columns.map(col => <th key={col.data}>{col.title}</th>)}
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            {columns.map(col => <td key={col.data}>{item[col.data]}</td>)}
            <td>
              <button onClick={() => onDelete(item.id)}>删除</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

重点：

• 用useRef存表格DOM和DataTables实例，方便后续操作
• 把data放进useEffect的依赖数组，数据一变就销毁旧实例、建新的
• 卸载组件时一定要销毁实例，不然会有内存问题

方案2：用DataTables API直接更新数据（更高效）

不想每次销毁重建的话，直接用DataTables的API更新数据集，不用动DOM：

import { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'datatables.net';

const GenericDataTable = ({ data, columns, onDelete }) => {
  const tableRef = useRef(null);
  const dtInstance = useRef(null);

  useEffect(() => {
    if (!dtInstance.current) {
      // 第一次初始化实例
      dtInstance.current = $(tableRef.current).DataTable({
        columns: columns,
        // 初始配置
      });
    } else {
      // 数据变化时，清空旧数据、加新数据、刷新表格
      dtInstance.current.clear();
      dtInstance.current.rows.add(data);
      dtInstance.current.draw();
    }

    return () => {
      if (dtInstance.current) {
        dtInstance.current.destroy();
      }
    };
  }, [data]);

  return (
    <table ref={tableRef} className="display">
      <thead>
        <tr>
          {columns.map(col => <th key={col.data}>{col.title}</th>)}
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  );
};

这个方法更高效，适合数据频繁变动的场景，直接操作DataTables的数据层，避免DOM层面的销毁重建。

额外要注意的点 #

• 确保你的删除函数是真的更新了父组件的数据源（比如用setState或者状态管理的action），只有数据源真变了，上面的useEffect才会触发
• 尽量别同时让React渲染tbody和DataTables用data配置渲染，二选一，不然容易出现DOM冲突
• 如果用的是官方封装的datatables.net-react包，也可以给整个表格组件加key={JSON.stringify(data)}，强制组件重新渲染，但这种方式不如手动操作实例优雅

内容的提问来源于stack exchange，提问作者Muhammad Waqar Anwar