무한 스크롤 또 에러

에러

게시판 리스트를 보여주는 페이지에서 다른 페이지로 이동한 후 다시 게시판 리스트 페이지로 돌아왔을 경우 같은 데이터가 추가되는 에러 발생

 

원인

같은 데이터인지 아닌지 구별할때 데이터 하나만 가지고 구별했다. 그러다보니 순서가 바뀌어서 들어오게되면 같은 데이터라도 들어가게 되는게 원인이었다. 

if (
  state.listData.length !== 0 &&
  state.listData.filter((el) => el.boardId === data[0].boardId).length === 0 
) {
  state.listData = [...state.listData, ...result];
}

 

해결

데이터 하나만 가지고 비교하는 것이 아니라 전체를 비교해서 기존 데이터에 없는 데이터만 추가하게끔 로직을 변경했다.

 

const NotData = data.reduce((acc: BoardDataProps[], cur) => {
  let result: BoardDataProps[] = [...acc];
  if (
    state.listData.filter((el) => cur.boardId === el.boardId).length === 0
  ) {
    result.push(cur);
  }
  return result;
}, []);
if (
  state.listData.length !== 0 &&
  NotData.length !== 0
) {
  state.listData = [...state.listData, ...NotData];
}