如何修复React JS中DataTable提示表格无可用数据的问题

问题原因 #

你的报错核心是jQuery DataTable的初始化时机和React的状态更新不同步：

1. 初始执行时student是空数组，你提前初始化了DataTable，此时表格中没有数据，DataTable会默认记录「无数据」的状态
2. 后续接口请求完成后setStudent更新状态，React重新渲染了表格行的DOM，但jQuery DataTable初始化后不会自动检测DOM变化，因此不会同步更新新渲染的数据
3. 你用setInterval每秒重复初始化DataTable的写法是错误的，不仅会导致严重的性能问题，还会触发DataTable重复初始化的冲突报错

修复方案 #

删掉错误的setInterval逻辑，新增监听student状态变化的useEffect，等数据加载完成、React渲染完DOM后再初始化DataTable，同时要避免重复初始化：

修正后的代码片段 #

const [student, setStudent] = useState([]);

const getStudent = async () => {
  try {
    const response = await fetch("http://localhost:5000/admin/get_allstudent");
    const data = await response.json();
    setStudent(data);
  } catch (err) {
    console.error(err.message);
  }
};

// 页面加载时请求数据
useEffect(() => {
  getStudent();
}, []);

// 监听student数据变化，数据更新后再初始化DataTable
useEffect(() => {
  // 仅当有数据时执行初始化逻辑
  if(student.length > 0) {
    // 先销毁已存在的DataTable实例，避免重复初始化报错
    if ($.fn.DataTable.isDataTable('#example')) {
      $('#example').DataTable().destroy();
    }
    // 初始化新的DataTable实例
    $('#example').DataTable();
  }
}, [student]);

渲染部分的代码不需要修改。

补充建议 #

如果后续会有增删改学生数据的操作，更新student数组后，上面的useEffect会自动检测到状态变化，重新渲染表格后同步更新DataTable的数据。
另外尽量不要在React项目中混用jQuery插件，推荐使用原生React的表格组件如react-table、MUI DataGrid，和React的响应式状态兼容度更高，不会出现类似DOM不同步的问题。

内容的提问来源于stack exchange，提问作者Ronell Villamil