React MUI 错误缺少数组 react/jsx-key 中元素的 \"key\" 道具答案

【问题标题】：React MUI Error Missing "key" prop for element in array react/jsx-keyReact MUI 错误缺少数组 react/jsx-key 中元素的 \"key\" 道具
【发布时间】：2022-11-30 00:18:12
【问题描述】：

{
    field: 'deletedAt',
    headerName: 'DeleteAt',
    type: 'actions',
    width: 200,
    editable: false,
    getActions: () => [<GridActionsCellItem icon={<DeleteIcon />} label="Delete" />],
  },

return (
    <div style={{ height: 720, width: '100%' }}>
      <DataGridPro
        rows={customizings}
        columns={columns}
        getRowId={(row) => row._id}
        experimentalFeatures={{ newEditingApi: true }}     
        components={{ Toolbar: GridToolbar }}
        initialState={{ pinnedColumns: { right: ['actions'] } }}
      />
    </div>
  );

我想将此图标添加到数据网格表的内容中，但出现返回键错误。我该如何解决？

【问题讨论】：

标签： reactjs material-ui key

【解决方案1】：

Key prop 在呈现元素数组时需要。但是因为这里只有一个元素，所以没有必要返回一个数组。只返回元素

getActions: () => <GridActionsCellItem icon={<DeleteIcon />} label="Delete" />,

【讨论】：