2024. 7. 12. 프로젝트 트러블 슈팅

트러블 슈팅

문제
 likesData가 배열이 아니라 객체로 반환되는 문제,  likesData가 정의되지 않았거나 배열이 아닌 경우 발생하는 타입 오류, 데이터를 올바르게 정렬 및 상태 관리하는 데 어려움이 있음

---

 

원인
데이터 형태 불일치: likesData가 객체로 반환되어 배열 메서드를 사용하지 못하는 문제

데이터 비동기 처리: posts와 likesData가 비동기로 로드되기 때문에, 데이터가 아직 로드되지 않았을 때 코드를 실행하여 오류가 발생할 수 있음

타입스크립트 타입 안전성: likesData가 배열이 아닐 경우 타입스크립트에서 타입 오류가 발생


해결 방법

likesData의 타입을 명확히 하고, 배열인지 확인하는 로직을 추가하여 타입 안전성을 확보
useEffect 훅 내에서 likesData가 배열인 경우에만 좋아요 수를 계산하고 정렬하도록 조건문 추가
likesData와 posts가 모두 로드된 후에만 상태를 업데이트하도록 수정

 

 

const posts: Post[] = data ? data.posts : [];

  const {
    data: likesData,
    error: likesError,
    isLoading: likesLoading,
  } = useAllLikes();

  const [postsWithLikes, setPostsWithLikes] = useState<
    (Post & { likesCount: number })[]
  >([]);

  useEffect(() => {
    if (posts && likesData && Array.isArray(likesData.likes)) {
      const postsWithLikes = posts.map((post) => {
        const likesCount = likesData.likes.filter(
          (like: any) => like.post_id === post.post_id
        ).length;
        return { ...post, likesCount };
      });

      
      const sortedPosts = postsWithLikes.sort(
        (a, b) => b.likesCount - a.likesCount
      );
      setPostsWithLikes(sortedPosts);
    }
  }, [posts, likesData]);