오늘 지난 주에 구현했던 좋아요 기능에서 firebase 오류가 생겼다.
( 수정부분 2 오류메시지 )
Uncaught (in promise) FirebaseError: Function arrayRemove() called with invalid data. Unsupported field value: undefined (found in document courses/...)
( 수정부분 1 오류메시지 )
Uncaught (in promise) FirebaseError: Function updateDoc() called with invalid data. Unsupported field value: undefined (found in field likes in document courses/...)
잘못된 데이터가 들어가서 발생한 오류 같은데, 초기 랜더링시에만 발생하고 있고, 좋아요 버튼을 눌렀을 때도 반영이 잘 되었기 때문에 초기 랜더링되면서 아직 받아오지 않은 데이터를 넣어 업데이트가 됐다고 생각했다.
원인은 대충 알겠지만 몇 시간을 고민해보고 시도해봐도 도저히 해결되지 않았다.
useEffect(() => {
const updateLikes = async () => {
if (like) {
await updateDoc(courseRef, {
likes: likeCount || null, // 수정부분 1
likesID: arrayUnion(currentId),
});
} else {
await updateDoc(courseRef, {
likes: likeCount || null, // 수정부분 1
likesID: arrayRemove(currentId),
});
}
};
if (!currentId) return; // 수정부분 2
updateLikes();
}, [like, likeCount]);수정부분 1
likeCount만 넘겨주도록 작성했는데, 넘겨줄 likeCount가 undefined여서 발생하는 오류라고 한다. 그래서 likeCount이거나 null을 넘기도록 수정했더니 오류가 해결되었다.
수정부분 2
이 부분은 아무래도 잘 모르겠어서 질문했던 부분이다. 여쭤보니 currnetId를 받아오기 전에 arrayRemove(currnetId)를 실행시켜서 발생한 오류로,
updateLikes함수가 실행되기 전에, currnetId 가 없는 경우에 실행시켜줄 코드를 추가함으로써 해결할 수 있었다.
useEffect를 사용할 때, 오늘 오류들과 같이 초기에 값을 받아오지 않을 때에는 실행시키지 않도록 해주게끔 커스텀hook으로 만들어 관리하면 좋다는 피드백도 받았다. 다음에 리팩토링 하면서 커스텀 훅으로 수정해봐야겠다.
