ReactJS錯誤：不變違規：使用jQuery Datatable插件時的processUpdates

在我的React應用程序中，我使用的是jQuery數據表。ReactJS錯誤：不變違規：使用jQuery Datatable插件時的processUpdates

最初表格加載正常。無論何時我試圖用新數據覆蓋數據，它都會拋出錯誤「不變的違規：processUpdates（）：無法找到元素的子元素10，這可能意味着DOM意外地發生了變異。」

I在這個問題上搜索。我的理解是因爲數據表插件直接改變DOM，React對狀態改變感到困惑。我得到的一個解決方案是在willComponentUpdate上調用數據表。但是，它不適合我。不知道如何解決這個問題。

感謝您的幫助。

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

來源

2015-09-29 jintoppy

我一直在從事相同爭奪最後一天半的時間。此時，我正在考慮爲原生React網格拋棄Datatables，如Griddle。這就是說，你可以在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); 
    },

要採取這一步，你可以使用檢查下/上一個道具和狀態，以確定是否需要做的其實渲染與否。

我的這個解決方案的問題是，它的速度太慢，有大量的數據表上的操作時，我得到醜陋的迴流。但它可能適用於較不復雜的網格。

來源

2015-09-30 18:36:11 jslatts

這真的很有幫助。我試圖像在componentWillUpdate中提到的那樣銷燬。但是，它開始拋出錯誤，如'找不到未定義的父節點'。它不會在fnDestroy上首次拋出錯誤。但是，當我第二次提供新數據時，它會給出錯誤。 – jintoppy

它在dnDestory的第二次調用中拋出錯誤？ #dataTable元素是否仍然在DOM上？ – jslatts

你說得對。在第二次調用時拋出錯誤，#dataTable元素仍然在DOM上 – jintoppy

ReactJS錯誤：不變違規：使用jQuery Datatable插件時的processUpdates

回答

相關問題