리액트 map is not a function 오류 채택완료
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
function Detail() {
const { id } = useParams();
const [movies, setMovies] = useState([]);
const getMovie = async () => {
const json = await (
await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
).json()
setMovies(json.data.movie);
};
useEffect(() => {
getMovie();
}, []);
return (
<div>
{movies && movies.map((movie) => (
<div key={movie.id}>
<img src={movie.medium_cover_image} alt={movie.title} />
<h2>{movie.title}</h2>
<p>{movie.summary}</p>
</div>
))}
</div>
);
}
export default Detail;
movies를 분명 useState를 이용하여 배열로 만들어줬는데도 map is not a function 에러가 뜨네요,,,, 뭐가 문제일까요?ㅜㅜㅜㅜ
답변 2개
https://yts.mx/api/v2/movie_details.json?movie_id=1
여기로 접근해보니
json.data.movie 자체가 객체네요
"data": {
"movie": {
"id": 1,
"url": "https://yts.mx/movies/bikini-model-academy-2015",
"imdb_code": "tt3208802",
"title": "Bikini Model Academy",
"title_english": "Bikini Model Academy",
"title_long": "Bikini Model Academy (2015)",
"slug": "bikini-model-academy-2015",
"year": 2015,
"rating": 2.3,
"runtime": 84,
"genres": [
"Action",
"Comedy"
],
"download_count": 127880,
"like_count": 67,
"description_intro": "When T. J. and Benji, two California twenty-something best buddies, lose their girlfriends, they start a home grown bikini modeling academy to make money and meet new girls. With a little help from T.J.'s Uncle Seymour (Gary Busey), the guys begin recruiting pretty girls, until a rival modeling school owned by their old grade school enemy tries to shut them down.",
"description_full": "When T. J. and Benji, two California twenty-something best buddies, lose their girlfriends, they start a home grown bikini modeling academy to make money and meet new girls. With a little help from T.J.'s Uncle Seymour (Gary Busey), the guys begin recruiting pretty girls, until a rival modeling school owned by their old grade school enemy tries to shut them down.",
"yt_trailer_code": "pOZbOY8liOA",
"language": "en",
"mpa_rating": "",
"background_image": "https://yts.mx/assets/images/movies/bikini_model_academy_2015/background.jpg",
"background_image_original": "https://yts.mx/assets/images/movies/bikini_model_academy_2015/background.jpg",
"small_cover_image": "https://yts.mx/assets/images/movies/bikini_model_academy_2015/small-cover.jpg",
"medium_cover_image": "https://yts.mx/assets/images/movies/bikini_model_academy_2015/medium-cover.jpg",
"large_cover_image": "https://yts.mx/assets/images/movies/bikini_model_academy_2015/large-cover.jpg",
"torrents": [
{
"url": "https://yts.mx/torrent/download/80F67E2D236A1A2854876F6A409C92D2D54C3849",
"hash": "80F67E2D236A1A2854876F6A409C92D2D54C3849",
"quality": "720p",
"type": "bluray",
"seeds": 1,
"peers": 1,
"size": "701.10 MB",
"size_bytes": 735156634,
"date_uploaded": "2015-10-31 16:40:51",
"date_uploaded_unix": 1446306051
},
{
"url": "https://yts.mx/torrent/download/BA2DD0FB35E9055372873D420E5C951CD41D6A8F",
"hash": "BA2DD0FB35E9055372873D420E5C951CD41D6A8F",
"quality": "1080p",
"type": "bluray",
"seeds": 4,
"peers": 0,
"size": "1.24 GB",
"size_bytes": 1331439862,
"date_uploaded": "2015-10-31 16:40:56",
"date_uploaded_unix": 1446306056
}
],
"date_uploaded": "2015-10-31 16:40:51",
"date_uploaded_unix": 1446306051
}
},
배열로 어떻게 바꿔서 넣으셨는지 알아야 될거같습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
다른 js파일들은 되는데 Detail.js만 안되네요 혹시 오브젝트이면 다음엔 어떻게 하면 되나요? 구글링해서 해봤는데도 잘안되네요ㅜ