리액트 map is not a function 오류

리액트 map is not a function 오류

QA

리액트 map is not a function 오류

답변 2

본문

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
    }
  },

 

배열로 어떻게 바꿔서 넣으셨는지 알아야 될거같습니다

 

배열이 문제 있는거 아닌가요?

(json.data.movie 콘솔로그로 보시고 이게 배열인지 오브젝트인지 구분하셔야될것같아요

 

콘솔로그로 봤는데 오브젝트더라구요 근데 useState로 분명 배열로 넣어줬는데도 이러네요,,,
다른 js파일들은 되는데 Detail.js만 안되네요 혹시 오브젝트이면 다음엔 어떻게 하면 되나요? 구글링해서 해봤는데도 잘안되네요ㅜ

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
  • 질문이 없습니다.
전체 0
© SIRSOFT
현재 페이지 제일 처음으로