선생님 강의 토대로 프로젝트 제작중 질문있습니다.

[김창모]

json url : "https://yts.mx/api/v2/list_movies.json?sort_by=rating"

위의  json 을 활용하여 React 프로젝트 제작중 Detail 페이지 제작에서 에러가 발생합니다.

App.js 에

<Route exact path="/detail/:id">
<Detail
movies={movies}
/>
</Route>

라우트를 만들었고

const [movies, setMovies] = useState();
const getMovies = async () => {
const { data: { data: { movies } } } = await axios.get('https://yts.mx/api/v2/list_movies.json?sort_by=rating');
setMovies(movies);
setIsLoading(false);
};
useEffect(() => {
getMovies();
}, []);

 

위의 코드로 movies 에 해당 데이터를 저장하여 props 를 이용하여

detail 페이지로 전송하려고 합니다.

 

Detail.js 에서

 

let { id } = useParams();                   id를 저장한후

 

return (
<div className="container">
<div className="detail">
<div className="detail_image">
<img src={props.movies[id].large_cover_image}/>
</div>
<div className="detail_title">{props.movies[id].movies[id].title}</div>
<div className="detail_yaer">{props.movies[id].year}</div>
<div className="detail_genres">
{props.movies[id].genres}
</div>
</div>
</div>
)

 

해당코드를 입력하였는데

 

위와같은 에러가 발생하는 이유가 무엇일까요 

 

[codingapple]

detail/1로 바로 접속하면 그런 에러가 나는 것입니까

detail/1로 바로 접속하면 movies 변수에 데이터를 저장하지 않은 상태기 때문에 movies[1] 이런거 하면 에러가 나는듯요

아마 detail 페이지의 useEffect에 movies 데이터 가져오라고 코드짜놓으면 될듯요 

[글쓴이]

글