[ JavaScript ] TypeError: [].map is not a function 해결하기

 
 
 
영화 정보를 가져와서 map함수를 이용해 뿌리기 위해 아래와 같이 코드를 짜고있었다.
그런데 난데없이 TypeError라며 movieList.map is not a function이라는 에러가 발생했다.

 

const readMovieList = async ()=>{
    const json = await(
        await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8&sort_by=year`)
        ).json();
    setMovieList(json);
    setLoading(false);
}
///////////////////
{movieList.map((movie)=><Movie id={movie.id}/>)}

 
 
 
이유가 뭘까 곰곰히 생각해보다가
movieList 데이터에 문제가 있어서 map이 제대로 작동하지않는 것 같아 console에 movieList 출력해봤는데
역시나 😂 data에 있는 movies 배열을 movieList에 넣어야했는데 아래의 값들이 전부 들어가있던 것 ...

 

{status: 'ok', status_message: 'Query was successful', data: {…}, @meta: {…}}
@meta: {server_time: 1689314272, server_timezone: 'CET', api_version: 2, execution_time: '0.01 ms'}
data: {movie_count: 1392, limit: 20, page_number: 1, movies: Array(20)}
status: "ok"
status_message: "Query was successful"
[[Prototype]]: Object

 
 
 
map은 콜백 함수를 이용해 각각의 배열의 요소를 호출해서 그 값을 변환시키는데
요소 값이 올바르지 않으니 에러가 나는게 당연했다.🥹
아래처럼 json.data.movies로 작성하여 MovieList에 moives데이터를 넣어주니 에러없이 잘 작동했다.

 

const readMovieList = async ()=>{
    const json = await(
        await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8&sort_by=year`)
        ).json();
    setMovieList(json.data.movies);
    setLoading(false);
}
///////////////////
{movieList.map((movie)=><Movie id={movie.id}/>)}