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

【问题标题】：Material-UI dataGrid with nested data from redux带有来自 redux 的嵌套数据的 Material-UI dataGrid
【发布时间】：2021-06-23 17:12:08
【问题描述】：

我正在开发一个从 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来保存meters数据。

我的代码如下所示：

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

之后我添加了长度属性，然后我又收到了类似这样的错误

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

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

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

非常感谢您的帮助。

【问题讨论】：

我认为错误来自dispatch(readWaterMeter())，因为它表示错误在承诺中。如果您从组件中删除除useEffect 和仅return null 之外的所有内容，您还会看到错误吗？如果是这样，请发布您的readWaterMeter 函数的代码。
您需要const data = useSelector((state) => state.waterReducer.metersData.data || []);，因为选择器应该选择您需要的最少数据量。我不知道为什么你会使用索引作为 id，因为它们似乎已经有一个 id 属性但那将是 const rows = data.map((obj, i) => ({ ...obj, id: i }));
你好@LindaPaiste..非常感谢你的回复......我的调度方法没有问题......问题出在useSelector方法上，添加一个空数组（|| [ ] ) 到我的选择器它工作...我能够看到数据...你救了我的一天...非常感谢

标签： reactjs react-redux datagrid react-hooks material-ui

【解决方案1】：

向 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,
    });
  });

【讨论】：

这与您的rows 部分相同：const rows = metersList.map((obj, i) => ({ ...obj, id: i }))。这就是你所需要的:)