[ReactNative] A VirtualizedList contains a cell which itself..에러

어떤 에러?

플랫리스트를 여러 개 사용하려다 보니 아래와 같은 에러가 발생했다.

 

ERROR A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

 

플랫리스트가 중첩되지 않고 여러번 쓰일 때 모든 형제 리스트에게 키값이 필요한 것 같았다.

 

사실 에러에서 답을 주고있었지만 listKey가 keyExtractor와 연관이 있는줄 알고 많은 삽질을 했다 (...)

key가 유니크한 값이 아니어서 그런가? 싶어서 이런 삽집들을 했었다.

• keyExtractor에서 index도 같이 받아와서 아이디값+인덱스값으로 키 만들기
• uuid 사용해보기

 

처음 참고했던 글.
https://stackoverflow.com/questions/49033549/invariant-violation-a-virtualizedlist-contains-a-cell-which-itself-contains-mor

Invariant Violation: A VirtualizedList contains a cell which itself contains more than one VirtualizedList

 

 

해결

아래와 같이 플랫리스트에 listKey 라는 속성을 고유한 값으로 주면 문제는 해결된다!

 

 

 

 

참고글

https://stackoverflow.com/questions/70721582/fix-this-react-native-error-virtualizedlist-contains-a-cell-which-itself-contain

Fix this React Native error VirtualizedList contains a cell which itself contains more than one VirtualizedList