错误:MUI:数据网格组件要求所有行具有唯一的' id '属性

Question

所以我试图从我的API使用数据填充一个数据网格:

const [listofInvoices, setListofInvoices] = useState({id: 0})
useEffect(()=>{
axios.get("http://localhost:3001/invoices").then((response)=>{
setListofInvoices(response.data) //State which contains the response from the API request
});
}, [])
const rows: GridRowsProp = [listofInvoices];
const columns: GridColDef[] = [
{ field: "invNumber", headerName: "Invoice Number", width: 150 },
{ field: "invAmount", headerName: "Invoice Amount", width: 150 }
];

然后我使用以下代码显示DataGrid:

<div style={{margin:'auto', height: 450, width: '95%' }}>
<DataGrid rows={rows} columns={columns} getRowId={(row) => row.id} components={{ Toolbar: GridToolbar }} />
</div>

但我一直得到这个错误，即使我所有的行有一个id:控制台错误

Answer 1

我怀疑你混淆了数组和对象。在这里初始化"发票列表"。对单个对象(非列表):

const [listofInvoices, setListofInvoices] = useState({id: 0})

为了弥补它不是数组的事实，你把它变成了一个数组:

const rows: GridRowsProp = [listofInvoices];

然后将结果数组传递给组件。这工作。但是，在AJAX操作之后更新状态:

setListofInvoices(response.data)

是response.data只是另一个对象，还是它是一个数组(如URL "invoices"所暗示的)?如果它是一个数组那么你仍然补偿它不是一个数组:

const rows: GridRowsProp = [listofInvoices];

这意味着现在你传递给组件一个只有一个元素的数组，这个元素也是一个数组，数组没有id属性。

---

从修复语义问题开始。单数事物保持单数，复数事物保持复数。否则你只会让自己陷入困惑。制作"发票清单"一个实际的列表:

const [listofInvoices, setListofInvoices] = useState([{id: 0}])

那么你就不必为它不是数组而进行补偿了:

const rows: GridRowsProp = listofInvoices;

并且任何时候你更新状态，只要"发票列表"就可以了。仍然是一个数组，那么它在语义上仍然是复数，仍然是正确的。这样你得到的总是一个数组，而不是有时是对象，有时是数组，有时是数组的数组。

Answer 2

在MUI DataGrid上使用getRowId propgetRowId type =func
返回给定GridRowModel的id。官方MUI网格API链接getRowId={(row) => row.ticket_serialNo}

const gridColumn = [{
field: "ticket_serialNo",
headerName: "Ticket Id",
headerClassName: "super-app-theme--header",
type: "string",
headerAlign: "left",
flex: 1,
},
{
field: "ticketState",
headerClassName: "super-app-theme--header",
headerName: "State",
headerAlign: "left",
flex: 1,
},
{
field: "ticketCity",
headerClassName: "super-app-theme--header",
headerName: "City",
headerAlign: "left",
flex: 1,
},]