在添加onTableChange时，Mui-Datatable setState无法工作。

Question

我使用的是mui，根据这个代码框的官方示例，您可以在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中反复调用componentDidUpdate时，就会发生这种情况。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中。如何纠正此错误？

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

Answer 1

这是持续呈现，因为您已经在setDisplayedData函数中使用了handleChange。因此，每当表更改时，您都会更新状态，并再次更改状态。所以它会有一个无限的循环。

您应该添加条件来检查您所获得的数据是否与prev中的数据不同。您可以尝试使用isEqualwith & isEqual函数来检查新数据是否与旧数据不同。

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

注意：向您添加了依赖项，并导入了isEqualwith & isEqual函数。