MUI x-сетка данных | Uncaught TypeError: невозможно прочитать свойства неопределенного типа (чтение «текущий»)

Question

Недавно я внедрил MUI x-data-grid в свое приложение, сначала оно работало нормально, но позже мое приложение начало давать сбой, выдавая мне эту ошибку:

Теперь я не использую и не возражаю или что-то еще, поэтому понятия не имею, как это исправить. Вот мой код:

      const DataTable: React.FC<Props> = (props) => {
  const classes = useStyles();
  const { rows, columns, showPagination, onPageChange, onRowChange, paginationValues } =
    props;
  const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>(
    []
  );

  return (
    <>
      {rows?.length > 0 ? (
        <>
          <DataGrid
            rows={rows}
            columns={columns}
            getRowId={(row) => row.id}
            autoHeight
            autoPageSize
            checkboxSelection
            hideFooter
            hideFooterPagination
            disableColumnFilter
            disableColumnMenu
            disableRowSelectionOnClick
            rowCount={parseInt(paginationValues?.count || "0")}
            paginationMode="server"
            onRowSelectionModelChange={(newRowSelectionModel, details) => {
              setRowSelectionModel(newRowSelectionModel);
              props.onRowSelectionModelChange?.(newRowSelectionModel, details);
            }}
            rowSelectionModel={rowSelectionModel}
            loading={props.loading}
            keepNonExistentRowsSelected={true}
            className={classes.dataTable}
            onRowClick={props.onRowClick}
            slots={{
              columnSortedAscendingIcon: ArrowDropUpIcon,
              columnSortedDescendingIcon: ArrowDropDownIcon
            }}
          />
          {showPagination && rows && rows?.length > 0 && (
            <DataTablePagination
              rowsPerPage={Number.parseInt(paginationValues?.rowsPerPage || "10")}
              currentPage={Number.parseInt(paginationValues?.page || "1")}
              count={Number.parseInt(paginationValues?.pages || "0")}
              onPageChange={onPageChange}
              paginationValues={paginationValues}
              setRowsPerPage={onRowChange}
            />
          )}
        </>
      ) : (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
          <EmptyData />
        </div>
      )}
    </>
  );
};
export default DataTable;

и вот как я использую этот компонент:

      <DataTable
            rows={productsToShow}
            columns={columns}
            paginationValues={pagination}
            onPageChange={handlePageChange}
            onRowChange={handleRowChange}
            showPagination
            loading={isLoading}
            onRowSelectionModelChange={(newRowSelectionModel) => {
              const newSelectedProducts: ProductData[] = [];
              newRowSelectionModel.forEach((id) => {
                const oldProducts = selectedProducts.find((product) => id === product.id);
                if (!oldProducts) {
                  const foundProduct = products?.results.find(
                    (product) => id === product.id
                  );
                  if (foundProduct) {
                    newSelectedProducts.push(foundProduct);
                  }
                } else {
                  newSelectedProducts.push(oldProducts);
                }
              });
              setSelectedProducts(newSelectedProducts);
            }}
          />

Я попытался удалить node_modules и файл блокировки пряжи и переустановить зависимости, но это не сработало, и я не смог найти какой-либо соответствующей проблемы в репозитории Github. Все проблемы, в которых возникает текущая проблема, используютapiRefа я нет. Я тоже попробовал установить тайм-аут. ПОМОЩЬ!

Answer 1

Проблема заключалась в том, что я пытался использовать DataGrid внутри модального всплывающего окна и использовалautoWidthиautoHeightатрибуты. Удаление их решило проблему для меня.

Объяснение. Таким образом, эти атрибуты используют ref, который обычно работает для элементов, присутствующих в DOM, но, поскольку таблица была во всплывающем окне, элементы не были в DOM, поэтому ref имел нулевое значение.