React MUI X Datagrid 组件：过滤不起作用

Question

我正在使用 MUIX Datagrid，并且过滤器在 DataGrid 组件的某一列中进行过滤后没有刷新 Datagrid 数据。

这是我的 DataGrid 代码：

const [dataRows] = useObservable(repository.allTransfers$);

const columns = [
{
  field: "serviceId",
  headerName: t("ID"),
  width: 100,
  filterable: true,
},
{ field: "date", headerName: t("Date") },
{ field: "vehicleType", headerName: t("Vehicle Type") },
{
  field: "reference",
  headerName: t("References"),
  width: 365,
},
{ field: "code", headerName: t("Code") },
{
  field: "action",
  headerName: "Action",
  width: 275,
  sortable: false,
  renderCell: (params: any) => {
    const row = params.row as Row;
    const onClickIntegrateWithExternalSystem = () => {
      if (row) {
        uploadTransferManifest(row);
      }
    };
    if (row && row.integrationStatus !== INTEGRATED) {
      return (
        <>
          <div>
            <Button onClick={onClickIntegrateWithExternalSystem}>
              {t("Integrate")}
            </Button>
          </div>
        </>
      );
    }
  },
},
{
  field: "integrationStatus",
  headerName: t("Integration Status"),
  width: 155,
  valueGetter: (params: any) => {
    return t(params);
  },
},
{
  field: "integrationDate",
  headerName: t("Integration Date"),
  width: 140,
  valueGetter: (params: any) => {
    return params ? format(params, "yyyy-MM-dd HH:mm") : "";
  },
},
{
  field: "reference",
  headerName: t("Reference"),
  width: 300,
},

];

<DataGrid
          rows={dataRows}
          columns={columns}
          disableColumnFilter={false}
          pagination
          rowCount={dataRows.length}
          getRowId={() => uuidv4()}
          getRowClassName={(params) =>
            params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd"
          }
        />

我在其他文章中搜索过解决方案，但没有一个解决方案能够解决问题。

可能你们中的一位可能遇到过类似的问题并可以提供帮助。

package.json 中的版本信息：

“@mui/x-data-grid”：“^7.22.0”

你能帮忙吗？

谢谢

Answer 1

更新了datagrid的代码，解决了问题

<DataGrid
          rows={dataRows}
          columns={columns}
          disableColumnFilter={false}
          pagination
          rowCount={dataRows.length}
          getRowId={(rowId) => rowId.id}
          getRowClassName={(params) =>
            params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd"
          }
        />