开发者问题收集

带有来自 redux 的嵌套数据的 Material-UI dataGrid

2021-03-26
4260
reactjs react-redux datagrid react-hooks material-ui

我正在开发一个页面，该页面从 API 获取数据并使用 Material UI 和 Datagrid 组装表格。我的目标是将数据解析到表格中。我的数据看起来像这样 

{
    id: 1,
    device_mrid: "xxx1",
    canaryDeviceId: "xxx",
  },
  {
    id: 2,
    device_mrid: "xxx2",
    canaryDeviceId: "xxx",
  },
  {
    id: 3,
    device_mrid: "xxx3",
    canaryDeviceId: "xxx",
  },

我能够使用假 API 创建一个 dataGrid 表，并希望获得像这样的最终结果 https://codesandbox.io/s/bold-leakey-eu3cq?file=/src/App.js

我使用 redux 状态 metersList.metersData.data 来保存仪表数据。

我的代码看起来像这样： 

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { readWaterMeter } from "./components/actions/waterActions";
import { FormattedMessage } from "react-intl";
import { DataGrid } from "@material-ui/data-grid";

export default function WaterNew() {
  const dispatch = useDispatch();
  const metersList = useSelector((state) => state.waterReducer);

  useEffect(() => {
    dispatch(readWaterMeter());
  }, [dispatch]);

  let rows = [];
  rows =
   metersList.metersData.data &&
    metersList.metersData.data.length > 0
      ? metersList.metersData.data.map((obj, index) => {
          return (rows = {
            id: index,
            device_mrid: obj.device_mrid,
            canaryDeviceId: obj.canaryDeviceId
          });
        })
      : " ";

  const columns = [
    {
      field: "device_mrid",
      headerName: "device_mrid",
      flex: 1,
      renderCell: ({ value }) => <FormattedMessage id={value} />
    },
    {
      field: "canaryDeviceId",
      headerName: "canaryDeviceId",
      flex: 1,
      renderCell: ({ value }) => <FormattedMessage id={value} />
    }
  ];

  return (
    <div className="App" style={{ height: "100%", width: "100%" }}>
      <DataGrid rows={rows} columns={columns} />
      {console.log("metersList", metersList.metersData.data)}
    </div>
  );
}

我能够在 console.log(return) 中看到我的仪表数据，但无法映射。

最初我收到此错误：

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined

之后我添加了 length 属性，然后我收到另一个类似的错误

Uncaught (in promise) TypeError: e.forEach is not a function

现在我不知道该如何继续....

第二个问题是我在 Columns 中重复了 renderCell 选项，有没有更好的方法编写 renderCell 以减少代码行数？

我非常感谢您的帮助。

2个回答

在向 useSelector 添加一个空数组后，它起作用了，并且我从行中删除了长度方法和三元运算符。 

const metersList = useSelector(
    (state) => state.waterReducer.metersData.data || []
  );


     let rows = [];
  rows = metersList.map((obj, index) => {
    return (rows = {
      id: index,
      device_mrid: obj.device_mrid,
      canaryDeviceId: obj.canaryDeviceId,
    });
  });
user8188349
2021-03-26

我有类似的错误 “TypeError：无法读取未定义的属性‘length’” ，但使用 React Query 作为数据源。通过检查数据状态解决了这个问题，如果它是“isLoading” - 显示空数组。 

const { isLoading, error, data } = useQuery([apiUrl], () =>
  fetch(apiUrl).then((res) => res.json())
);

<DataGrid
  rows={!isLoading ? data : []}
  columns={columns}
  pageSize={100}
  rowsPerPageOptions={[50]}
  checkboxSelection
  disableSelectionOnClick
  experimentalFeatures={{ newEditingApi: true }}
  components={{ Toolbar: GridToolbar }}
/>;
2022-10-24