안녕하세요.

오늘 하루종일 봤는데 도저히 해결이 안되서 질문글 올립니다.

슬랙에서도 많은 분들이 도와주셨지만 해결을 못해서 여기서도 묻고자 합니다.

현재 리액트 초급강의 완강하고 #7.6의 챌린지 진행중입니다.

영화웹의 detail부분을 작성하는데 이상하게 genres 데이터를 불러오는 부분에서 계속

undefine가 발생합니다. 그리고 이 genres데이터를 불러오는 부분만 지우면 또 정상적으로 움직입니다.

제가 작성한 코드부분 입니다.

import { useCallback, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
//import Movie from "../components/Movie";

function Detail() {
  const [movie, setMovie] = useState({});
  const { id } = useParams();
  const getMovie = useCallback(async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    setMovie(json.data.movie);
    console.log(json.data.movie);
  }, [id]);

  useEffect(() => {
    getMovie();
  }, [getMovie]);
  return (
    <div>
      <h1>{movie.title}</h1>
      <p>{movie.description_intro}</p>
      <ul>
        {movie.genres.map((genre, index) => (
          <li key={index}>{genre}</li>
        ))}
      </ul>
    </div>
  );
}

export default Detail;

해당 코드에서 ul 태그안에 genres데이터를 가지고 올때 에러가 발생합니다.

에러 스크린샷입니다.
계속 저렇게 undefined가 되어버리는데 데이터를 왜 못불러오는지를 모르겠습니다.

제 깃허브 URL입니다.https://github.com/0626na/React-movie-app

읽어주셔서 감사합니다. 단순한 부분인거 같은데 왜이러는건지 모르겠습니다.