ReactJS错误：不变违规：使用jQuery Datatable插件时processUpdates

Question

在我的React应用程序中，我使用的是jquery Datatable表。

最初表格加载正常。每当我试图用新数据覆盖数据时，就会抛出错误＆＃34;不变违规：processUpdates（）：无法找到元素的子元素10。这可能意味着DOM意外地发生了变异。＆＃34;

我搜索了这个问题。我理解的是因为datatable插件直接改变了DOM，所以React对状态变化感到困惑。我得到的一个解决方案是在willComponentUpdate上调用数据表。但是，它对我不起作用。不确定如何解决这个问题。

感谢您的帮助。

＆＃13;

＆＃13;

$('#topicsTable')
  .addClass('initialized')
  .dataTable({
    order: [
      [4, "desc"]
    ],
    columnDefs: [{
      targets: [-1],
      className: 'hidden'
    }]
  });

＆＃13;

＆＃13;

＆＃13;

Answer 1

在过去的一天半里，我一直在进行同样的战斗。此时，我正在考虑抛弃Datatables以获取Griddle等本机React网格。

话虽这么说，你可以通过在React对DOM做任何工作之前销毁和重新初始化Datatables来强制它工作。使用组件生命周期执行此操作：

  // Initialize Datatable after React has rendered
  componentDidMount() {
    $('#dataTable').dataTable(dataTableStyle);
  },

  // Destroy Datatable before any component updates
  componentWillUpdate(nextProps, nextState) {
    $('#dataTable').dataTable().fnDestroy();
  },

  // Re-initialize Datatable after React has rendered
  componentDidUpdate(prevProps, prevState) {
    $('#dataTable').dataTable(dataTableStyle);
  },

为了更进一步，您可以使用检查下一个/上一个道具和状态，以确定您是否需要实际进行渲染。

我对这个解决方案的问题是它太慢了，当我在有大量数据的表上运行时，我会得到难看的回流。但它可能适用于不太复杂的网格。