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

Question

当我尝试创建 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 的方式。这里出了什么问题？

Answer 1

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

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} ], ... ]

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

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

这里有一个 codesandbox 你可以摆弄。

Answer 2

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

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

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

Answer 3

但是我传递 uniqueField 时遇到错误 TypeError: Cannot read properties of undefined (reading 'id') 。那么我该如何解决它..？