무한 스크롤 중복 데이터 에러 수정

에러

무한 스크롤이 동작하는 페이지에서 다른 페이지로 이동했다가 다시 무한스크롤이 동작하는 페이지에 오니 발생하는 에러였다. 에러의 내용은 map 메서드를 사용하는데 전달해준 key의 값에 같은 값이 있다라는 에러였다.

 

원인

map 메서드에 작성되는 첫번째 태그에 key값이 주어진다. key값은 고유한 값으로 전달해야 되기 때문에 받아오는 item들의 id값을 전달해 주었다. 그런데 같은 데이터가 들어가면서 같은 id값이 들어가는 것이 오류였다.

 

(filteredData.length === 0 ? isData : filteredData)?.map((el) => {
   return <BoardItem key={el.boardId} data={el} />; //key값으로 고유한 boardId값을 넣어주었다.
}

 

해결

원래는 요청을 미리 차단해 막고싶었다. 하지만 아직 찾지 못해서 요청은 받지만 데이터를 순환하여 같은 데이터가 없을 경우 데이터에 추가하도록 에러를 수정했다.

// 수정 전
state.listData = [...state.listData, ...result];
      
// 수정 후
if (state.listData.length !== 0 && state.listData.filter((el) => el.boardId === data[0].boardId).length === 0) {
  state.listData = [...state.listData, ...result];
} else if (state.listData.length === 0) {
  state.listData = result;
}

• 원래 데이터의 갯수가 0이 아니고 원래 데이터에 새로 받아온 데이터의 0번째 인덱스 값이 없을 경우 데이터를 추가한다.
• 원래 데이터의 갯수가 0일 경우 새로 받아온 데이터를 넣는다.

 

아쉬운 점

• 요청 자체를 막지 못한 것이 아쉽다. 방법을 찾는다면 다시 고쳐봐야겠다.