材质UI数据网格，包含来自redux的嵌套数据

Question

我正在开发一个页面，该页面从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(中看到我的电表数据，但无法映射。

最初我得到了这个错误：

未捕获(承诺中(类型错误：无法读取未定义的属性"length">

在我添加了长度属性之后，我会得到另一个错误，比如这个

未捕获(承诺中(类型错误：e.forEach不是函数

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

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

我真的很感激你的帮助。

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

Answer 2

我有类似的错误"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 }}
/>;