使用 MaterialUI DataGrid 显示嵌套对象值

Question

大家好 Stackoverflow，我正在尝试从 API 获取数据并将其导入到 React js 中的数据网格中。

\n

以下是我从 API 获取的数据格式。

\n

{data: Array(200)}\ndata\n: \n(200) [{\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, \xe2\x80\xa6]\n[[Prototype]]\n: \nObject\n

\n

data: \n[\n{type: 'PropertyDamage', id: '100', attributes: {identification_number: '3931', damage_date: '2021-04-29', report_date: '2021-06-26'}},\n{type: 'PropertyDamage', id: '101', attributes: {identification_number: '3839', damage_date: '2021-01-21', report_date: '2021-08-25'}},\n{type: 'PropertyDamage', id: '102', attributes: {identification_number: '3735', damage_date: '2021-04-25', report_date: '2021-10-29'}}\n]\n

\n

这些是我用数据映射的列。在数据网格中，“id”参数正确显示。

\n

const columns = [\n  { field: 'id', headerName: "ID" },\n  {\n    field: "attributes.identification_number",\n    headerName: "Identification Number",\n    headerAlign: "left",\n    align: "left",\n    flex: 1,\n  },\n  {\n    field: "attributes.damage_date",\n    headerName: "Damage Date",\n    flex: 1,\n  },\n  {\n    field: "attributes.report_date",\n    headerName: "Report Date",\n    flex: 1,\n  },\n];\n

\n

我使用以下代码使用 useEffect 和 useState 来获取 API。

\n

const Dashboard = () => {\n  \n  const [propertydamages, setPropertyDamages] = useState([]);\n\n  useEffect(() => \n    {\n        const url = "URL";\n            fetch(url, {\n            method: "GET",\n            withCredentials: true,\n            headers: {\n                'X-API-Key': 'API Key'\n            }\n            })\n            .then((response) => response.json())\n            .then((json) => {\n              setPropertyDamages(json)\n            } )\n            .catch(function(error) {\n                console.log(error);\n            });\n    }, [])\n\n  return (\n    <Box m="20px">\n      {/* Data Grid */}\n        <DataGrid \n            rows = {propertydamages}\n            columns = {columns}\n        />\n    </Box>\n  );\n};\n

\n

当我尝试使用“attributes.identification_number”获取属性值（例如标识号（对象内部的值））时，它不起作用。只是为了看看我尝试编写“属性”，但我得到了像这样的响应 [object object]。\n我应该如何获取诸如identification_number、damage_date 和report_date 之类的值？预先非常感谢您:)

\n

Answer 1

在 Material UI 中，DataGrid组件接受一个列对象数组作为其columnprop。这些对象可以指定valueGetter如何使用值来渲染、排序和过滤：

{
  field: "identification_number",
  headerName: "Identification Number",
  headerAlign: "left",
  align: "left",
  flex: 1,
  valueGetter: params => params.row.attributes.identification_number
},

您可以更新列对象以对嵌套对象使用 valueGetter。valueGetter您可以在文档中阅读有关该选项的更多信息。