리액트 map is not a function 오류

리액트 map is not a function 오류

QA

리액트 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
    }
  },

 

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

 

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

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

 

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

답변을 작성하시기 전에 로그인 해주세요.
전체 0 | RSS
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT