时间戳

首页 > 解决方案 > 材质 UI 数据网格最大更新深度超出错误

javascript - 材质 UI 数据网格最大更新深度超出错误

问题描述

我收到此错误/警告，同时输入表格的行并停止屏幕

警告：超过最大更新深度。当组件在 useEffect 中调用 setState 时，可能会发生这种情况，但 useEffect 要么没有依赖数组，要么每次渲染时依赖项之一发生变化。

代码示例在这里

我添加时发生错误

onSelectionChange={(newSelection) => {
                        select(newSelection.rows);
                    }}

在数据网格中

标签： javascriptmaterial-ui

解决方案

而不是使用useState，你可以使用useRef。useRef不会导致组件重新渲染，因为它独立于组件生命周期，因此将避免您面临的问题。

您可以使用 设置和访问选定的行useRef.current。

我已经更新了您的示例组件以useRef代替useState下面使用，并且还包含了一个工作示例。请注意，在示例中，选定的行记录在控制台中。

import React from "react";
import "./styles.css";
import { ColDef, DataGrid, RowsProp } from "@material-ui/data-grid";

export default function App() {
  const selectedRows = React.useRef([]);

  const onSelect = (event) => {
    selectedRows.current = event.rows;
    console.log(selectedRows.current);
  };

  const rows: RowsProp = [
    {
      id: 0,
      name: "LuluBox_v4.8.8_apkpure.com.apk",
      type: "application/vnd.android.package-archive",
      lastModifiedDate: "2020-10-20T00:27:43.669Z",
      size: "13805 kB",
      file: { path: "LuluBox_v4.8.8_apkpure.com.apk" }
    },
    {
      id: 1,
      name: "LuluBox_v4.8.8_apkpure.com.apk",
      type: "application/vnd.android.package-archive",
      lastModifiedDate: "2020-10-20T00:27:43.669Z",
      size: "13805 kB",
      file: { path: "LuluBox_v4.8.8_apkpure.com.apk" }
    }
  ];
  const columns: ColDef[] = [
    { field: "id", hide: true },
    { field: "name", headerName: "Name", width: 400 },
    { field: "size", headerName: "Size", width: 250 },
    { field: "lastModifiedDate", headerName: "lastModifiedDate", width: 400 }
  ];
  return (
    <DataGrid
      rows={rows}
      columns={columns}
      pageSize={8}
      autoHeight
      checkboxSelection
      hideFooter
      onSelectionChange={onSelect}
    />
  );
}

推荐阅读