Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. 해결 방법

MUI의 DataGrid를 활용한 토이프로젝트 진행 도중 다음과 같은 에러가 발생하였습니다. Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. MUI DataGrid 컴포넌트를 사용하실 땐 MUI 자체에서 행에 고유한 id Props를 설정해줘야 합니다.

MUI DataGrid에 고유 id props를 추가해 보겠습니다. MUI DataGrid API 레퍼런스에 가서 보시면 getRowId 프롭스가 있습니다. 바로 이것을 설정 해주시면 됩니다. getRowId 프롭스를 통해 해당 행의 ID를 반환할 수 있습니다.

getRowId 타입은 Function이여서 함수형태로 주셔야 합니다. 인수로 row를 입력하고 row의 ID를 값으로 설정하시면 됩니다. 아래 이미지를 참고하시면 이해되실 겁니다. 이렇게 하면 위의 에러는 사라지고 정상적으로 작동할 것입니다.

Reference

https://mui.com/x/api/data-grid/data-grid/

저작자표시 비영리 변경금지

'1. 웹개발 > 1_3_1 Debug' 카테고리의 다른 글

[Yarn Berry] Module '"@prisma/client"' has no exported member 'PrismaClient'. 해결 (1)	2023.11.12
[AWS S3 오류] has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결 방법 (2)	2023.01.22
AxiosError: Request failed with status code 500 해결 방법 (2)	2022.12.17
page /fetch getServerSideProps can not be attached to a page's component and must be exported from the page 해결 방법 (0)	2022.07.06
Operator '<' cannot be applied to types 'boolean' and 'RegExp' 해결 방법 (0)	2022.06.28

코딩병원