ReactJS 错误：Invariant Violation：使用 jQuery Datatable 插件时的 processUpdates

Question

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

最初表格加载正常。每当我尝试用新数据覆盖数据时，它都会抛出错误“Invariant Violation: processUpdates(): Unable to find child 10 of element。这可能意味着 DOM 意外突变..”

我搜索了这个问题。我的理解是，由于数据表插件直接改变了 DOM，React 对状态变化感到困惑。我得到的一种解决方案是调用 willComponentUpdate 上的数据表。但是，它对我不起作用。不知道如何解决这个问题。

感谢您的帮助。

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

Answer 1

在过去的一天半里，我一直在进行同样的战斗。在这一点上，我正在考虑为像 Griddle 这样的原生 React 网格放弃 Datatables。

话虽如此，您可以通过在 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);
  },

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

我对这个解决方案的问题是它太慢了，并且在对包含大量数据的表进行操作时，我会遇到难看的重排。不过，它可能适用于不太复杂的网格。