React JS用JSON渲染DataTable时报Cannot read properties of undefined (reading 'mData')错如何解决

这个TypeError: Cannot read properties of undefined (reading 'mData')错误通常是jQuery DataTable初始化时机不对、列配置与JSON数据不匹配、重复初始化导致的，按以下步骤排查即可解决：

1. 调整DataTable初始化时机 #

你需要确保JSON数据已经加载完成、且表格DOM通过map渲染完成后，再初始化DataTable实例。不要在组件刚挂载时就执行初始化逻辑，要把数据状态加入useEffect的依赖项：

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

const MyTable = () => {
  const [tableData, setTableData] = useState([]);

  // 模拟获取JSON数据
  useEffect(() => {
    fetch('/your/data.json')
      .then(res => res.json())
      .then(data => setTableData(data));
  }, []);

  // 等tableData加载完成后再初始化DataTable
  useEffect(() => {
    // 数据为空时不执行初始化
    if(tableData.length === 0) return;
    // 先销毁已存在的实例避免重复初始化报错
    if ($.fn.DataTable.isDataTable('#sortTable')) {
      $('#sortTable').DataTable().destroy();
    }
    // 初始化表格
    $('#sortTable').DataTable();
  }, [tableData]); // 依赖项加入tableData

  return (
    <table id="sortTable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>部门</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map(item => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.age}</td>
            <td>{item.department}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

2. 优先使用DataTable内置数据加载能力（更稳定） #

不用手动写map渲染表格行，直接把JSON数据传入DataTable的data配置项，由插件自行渲染，完全规避时机不一致的问题：

useEffect(() => {
  if(tableData.length === 0) return;
  if ($.fn.DataTable.isDataTable('#sortTable')) {
    $('#sortTable').DataTable().destroy();
  }
  $('#sortTable').DataTable({
    data: tableData, // 直接传入JSON数组
    columns: [
      { data: 'name' }, // 和JSON字段严格对应
      { data: 'age' },
      { data: 'department' }
    ]
  });
}, [tableData]);

// 表格部分不需要写tbody里的map逻辑
return (
  <table id="sortTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>部门</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
)

3. 排查列配置与JSON字段匹配性 #

如果用内置data加载的方式，要确保columns配置里的data属性值和JSON返回的对象字段名完全一致，大小写、拼写都不能出错，缺失对应字段也会触发该报错。

内容的提问来源于stack exchange，提问作者MAMO EMIRU