MUI datagrid -typeError：无法读取未定义的属性（reading＆＃x27; name＆＃x27;）

Question

我使用材料UI的dataGrid在表中显示一些数据，我最近切换到REDUX的RTK查询以进行缓存，并摆脱了项目中的全球状态管理，但遇到了标题中提到的问题。

我当前看到的错误是typeError：无法读取未定义的属性（读取'name'）

在尝试在嵌套对象中获取数据时会发生这种情况，我正在使用value> valuegetter < /代码>到达嵌套值。下面的const显示了表的列和valuegetter的位置（我删除了此示例的一些列），

const columns = [
    { field: "id", headerName: "ID", width: 70 },
    {
      field: "App",
      headerName: "App",
      width: 110,
      valueGetter: (params) => params.row.app.name, // <---- Recieving error here
      valueFormatter: (params) => capitalise(params.value),
    }
  ];

这就是我的组件的样子（我还删除了一些仅为此示例的代码）：

import React, { useEffect, useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
import { IconButton } from "@material-ui/core";
import { CustomLoadingOverlay } from "../gbl/datagrid/DataGridUtils";
import { capitalise } from "../utils/util";
import {
  useGetAppAccountTypesQuery,
  useDeleteAccountTypeMutation,
} from "../../services/reducers/accounttypes";

export default ({ appid }) => {

  const { data, isLoading, isSuccess } = useGetAppAccountTypesQuery(appid);
  const [loading, setLoading] = useState(true);

  console.log(data, isLoading, isSuccess);
  
  // Testing only
  useEffect(() => {
    if (isSuccess) setLoading(false);
  }, [isLoading]);

  const columns = [
    { field: "id", headerName: "ID", width: 70 },
    {
      field: "App",
      headerName: "App",
      width: 110,
      valueGetter: (params) => params.row.app.name,
      valueFormatter: (params) => capitalise(params.value),
    }
  ];
  return (
    <>
      <div
        style={{
          height: 190,
          width: "100%",
          backgroundColor: "white",
          marginTop: 40,
          borderRadius: 4,
        }}
      >
        <DataGrid
          loading={loading}
          rows={data}
          columns={columns}
          components={{
            LoadingOverlay: CustomLoadingOverlay,
          }}
          hideFooter
          density="compact"
          pageSize={6}
          rowsPerPageOptions={[5]}
          checkboxSelection
          disableSelectionOnClick
        ></DataGrid>
      </div>
    </>
  );
};

组件重新呈现几次，每个渲染console.log（数据，isloading，issuccess）看起来

undefined true false <---- this gets logged 3 times
Array(2) false true
Array(2) false true

这个问题似乎是间歇性的，就像它一样有时可以工作，

在切换到RTK查询之前，我使用Axios并使用效果来调用端点，并且从未收到此错误，我在这里做错了吗？

任何帮助将不胜感激。

Answer 1

我想说的是，这里与RTK-Q本身无关，这只是一个常见的JS问题\问题，应该缩小到Null-Check。
正常的是，在某些情况下，您可能会产生不确定的结果，应在代码中对其进行处理。可能有几个选项：

1. 最正确的方法是只返回一个空对象或加载状态（如Spinner \ Skeleton），当数据不确定并且\或data isloading = true = true：

   const {data，isloading，issuccess} = usegetAppApcCountTypesquery（appid）;

   如果（！数据|| is Loading）返回＆lt;＆gt;＆gt; skeleton或spinner＆lt;/＆gt ;;

2. 通常 - 使用null -SAFE ？访问者：

   valuegetter ：（ params）=＆gt; params？row？.app？.name，

3. 设置data的默认值与某些对象结构相匹配适当的列配置：

   const default_data = {
   排： {
   应用程序： {
   姓名： ””
   }
   }
   }

   const {data = default_data，isloading，issuccess} = usegetAppApcCountTypesquery（appid）;

4. 数据加载期间，当数据不确定时什么都不做：

   const列=数据？ [...您的列映射...]：[];

您可以组合使用它们，在加载时间内实现预期的结果。

Answer 2

照顾选择模型。即：第一次单击一行或单元格，选择模型是一个带有一个项目的数组：所选行的索引。如果再次单击同一行，则选择模型为空（未选择该行）

  selectionModel={selectionModel}
  onSelectionModelChange={(selection) => {
  const selectionSet = new Set(selectionModel);
  const result = selection.filter((s) => !selectionSet.has(s))
  setSelectionModel(result)
  if(result.length > 0)
    // save de selection model on click on a row
    setRecursoSelected(rows[result[0]])
  else
    // after clicking the same row (unselected) 
    setRecursoSelected({})
  }}