添加 setState 时，Mui-Datatable onTableChange 不起作用

Question

我用的是mui-datatable，根据这个codesandbox的官方例子，你可以在 tableState上 setState。 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 因此，我添加了这个，但是，这会导致错误：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

  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。我该如何解决这个错误？

我在 codesandbox 上重现了这个错误：https://codesandbox.io/s/mui-datatable-reports-mqrbb3?file=/src/App.js:4130-4415

Answer 1

这是保持渲染，因为你在handleChange函数中使用了setDisplayedData。因此，每当 table 更改时，您都会更新状态并再次更改状态。所以会进入死循环。

你应该设置条件来检查你得到的数据是否与上一个不同。您可以尝试使用 lodash 库中的 isEqualwith & isEqual 函数来检查新数据是否与旧数据不同。

const handleChange = (action, tableState) => {
    console.log(tableState.displayData);
    if(!isEqualwith(displayedData, tableState.displayData, isEqual)) { 
         setDisplayedData([...tableState.displayData]);}
        };

注意： 将 lodash 添加到您的依赖项并导入 isEqualwith 和 isEqual 函数。

添加 setState 时，Mui-Datatable onTableChange 不起作用

Mui-Datatable onTableChange is not working when adding a setState

javascript

reactjs

material-ui

mui-datatable