[React] Warning: Encountered two children with the same key, `[object Object]`

오오구·2022년 12월 21일
0

💥Error 때려잡기

목록 보기
5/10

Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

발생상황

검색 기능 구현시에 검색 결과 데이터를 렌더링할 때 발생함

원인

배열로 된 state에서 map으로 리스트를 뽑아낼 때 리스트 key값으로 object가 들어가서 발생

에러 발생과 더불어
메인 페이지로 돌아가면 검색 데이터는 화면에서 사라지고 기본 데이터가 새로 불러와져야 하는데,검색 데이터가 화면에 남아있는 상태로 기본 데이터가 출력됐다. 알고보니 이것도 key값이 정상적이지 않아서 렌더링이 비정상 처리되어 발생하는 문제였다.

해결

key값에 object타입이 아닌 string타입의 고유한 데이터를 부여함

profile
더 이상 미룰 수 없다

0개의 댓글