오늘 지난 주에 구현했던 좋아요 기능에서 firebase 오류가 생겼다.

Trouble

좋아요 기능에서 firebase 오류가 생겼다.

Uncaught (in promise) FirebaseError: Function arrayRemove() called with invalid data. Unsupported field value: undefined (found in document courses/...)

Uncaught (in promise) FirebaseError: Function updateDoc() called with invalid data. Unsupported field value: undefined (found in field likes in document courses/...)

문제 원인

첫번째 오류메시지는 updateDoc 을 하면서 넘겨주는 likeCount가 undefined여서 발생하는 오류이고,

두번째 오류메시지는 useEffect()로 맨 처음 랜더링할때, currnetId를 받아오기 전에 arrayRemove(currnetId)를 실행시켜서 발생한 오류였다.

해결

  useEffect(() => {
    const updateLikes = async () => {
      if (like) {
        await updateDoc(courseRef, {
          likes: likeCount || null,
          likesID: arrayUnion(currentId),
        });
      } else {
        await updateDoc(courseRef, {
          likes: likeCount || null, 
          likesID: arrayRemove(currentId),
        });
      }
    };
    if (!currentId) return; 
    updateLikes();
  }, [like, likeCount]);

updateDoc 오류는 likes에 likeCount이거나 null을 넘기도록 수정함으로써 해결했고,

arrayRemove(currnetId) 오류는 updateLikes함수가 실행되기 전에, currnetId 가 없는 경우에 실행시켜줄 코드를 추가함으로써 해결할 수 있었다.

• ) useEffect를 사용할 때, 오늘 오류들과 같이 초기에 값을 받아오지 않을 때에는 실행시키지 않도록 해주게끔, 아래와 같이 커스텀 hook으로 만들어서 해결하는 방법도 있다는 피드백도 받았다 !

import { useEffect, useRef } from "react";

  export const useUpdateEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
      if (didMount.current) func();
      else didMount.current = true;
    }, deps);
  };