尝试创建 Material-UI DataGrid 时如何修复这些错误？答案

【问题标题】：How do I fix these errrors when trying to create Material-UI DataGrid?尝试创建 Material-UI DataGrid 时如何修复这些错误？
【发布时间】：2021-12-29 09:34:23
【问题描述】：

我在尝试创建 Material-UI DataGrid 时遇到以下错误：

Uncaught Error: MUI: The data grid component requires all rows to have a unique id property. A row was provided without id in the rows prop

和

Warning: Failed prop type: Invalid prop `rows[0]` of type `array` supplied to `ForwardRef`, expected `object`

这是我创建网格的方式：

<DataGrid
    columns={[
        {field: "id", headerName: "ID", width: 75, editable: false},
        {field: "number", headerName: "Number", width: 150, editable: false},
        {field: "serial", headerName: "Serial", width: 150, editable: false},
    ]}
    rows={response.data.map((item, index) =>[
        {
            id: index,
            number: item.number,
            serial: item.serial,
        },
    ])}
    pageSize={15}
    rowsPerPageOptions={[9]}
    checkboxSelection
    disableSelectionOnClick
/>

如您所见，我确实有一个 id 字段，但它仍在抱怨它。这也是在 Material-UI 网站上的示例中定义 id 的方式。这里有什么问题？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Yo 将每个项目映射为一个项目的数组。你应该使用

rows={response.data.map((item, index) =>(
    {
        id: index,
        number: item.number,
        serial: item.serial,
    }
))}

你写的

response.data.map((item, index) =>[
    {
        id: index,
        number: item.number,
        serial: item.serial,
    },
])

将response.data 映射到包含一项的数组的数组。

[ [ {id, number, serial} ], [ {id, number, serial} ], ... ]

这就是为什么材料 ui 指出 id 丢失的原因。你想要的是

[ {id, number, serial}, {id, number, serial}, ... ]

这是一个codesandbox，你可以随意摆弄。

【讨论】：

【解决方案2】：

如果您提供的数组中有唯一键，只需将其添加到 rowID 属性即可。

<DataGrid getRowId={row => row.yourUniqueField}

如果您没有每个数组元素的唯一键，只需附加一个 uuid。

【讨论】：