我正在使用 mui-datatable 并基于此代碼框的官方示例，您可以 setState在 tableState. https://codesandbox.io/s/trusting-jackson-k6t7ot?file=/examples/on-table-init/index.js
handleTableInit = (action, tableState) => {
console.log("handleTableInit: ", tableState);
this.setState({ table: tableState });
};
handleTableChange = (action, tableState) => {
console.log("handleTableChange: ", tableState);
this.setState({ table: tableState });
};
我想得到，tableState.displayData因此，我添加了這個，但是，這將導致一個錯誤，上面寫著：
超過最大更新深度。當組件在 componentWillUpdate 或 componentDidUpdate 中重復呼叫 setState 時，可能會發生這種情況。React 限制了嵌套更新的數量以防止無限回圈。
const handleChange = (action, tableState) => {
console.log(tableState.displayData);
setDisplayedData(tableState.displayData);
};
const options = {
enableNestedDataAccess: ".",
print: false,
filterType: "multiselect",
selectableRows: "none",
downloadOptions: { filename: "Data.csv", separator: "," },
expandableRows: true,
onTableChange: handleChange,
onTableInit: handleTableChange,
我想將資料存盤tableState.displayData到setDisplayedData. 我該如何解決這個錯誤？
我在代碼沙箱上重新創建了這個錯誤：https://codesandbox.io/s/mui-datatable-reports-mqrbb3?file=/src/App.js: 4130-4415
uj5u.com熱心網友回復：
這是保持渲染，因為你已經setDisplayedData在handleChange函式中使用了。因此，每當表更改時，您都會更新狀態并再次更改狀態。所以它會進入一個無限回圈。
您應該設定條件來檢查您獲得的資料是否與上一個不同。您可以嘗試使用isEqualwithlodashisEqual庫中的函式來檢查新資料是否與舊資料不同。
const handleChange = (action, tableState) => {
console.log(tableState.displayData);
if(!isEqualwith(displayedData, tableState.displayData, isEqual)) {
setDisplayedData([...tableState.displayData]);}
};
注意：將 lodash 添加到您的依賴項并匯入 isEqualwith & isEqual 函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/456335.html
標籤：javascript 反应 材料-ui 多数据表
上一篇：如果數量更新，如何獲得訂單總額