React useState массив отображает undefined

Question

Я создаю приложение, используя react и api из Moviesdb. Я получаю результаты из api, но если я хочу получить доступ к отдельному значению данных json, я получаю от api, который я показываю. Movies [0] is undefined error

const [Movies, setMovies] = useState([]);
useEffect(() => {
    fetch(`${MOVIE_API_URL}movie/popular?api_key=${MOVIE_API_KEY}&lang=en-us&page=1`)
        .then(response => response.json())
        .then(response => {
            setMovies(response.results)
        });
}, []);
return (
    <div style={{ width: '100%', margin: 0 }} >

        <MainImage
            Image={`${MOVIE_IMAGE_URL}w1200${Movies[0].backdrop_path}`}
            title={Movies[0].original_title}
            text={Movies[0].overview}
        />
)

Movies отображает этот массив ниже

[{
   adult: false
   backdrop_path: "/5BwqwxMEjeFtdknRV792Svo0K1v.jpg"
   genre_ids: Array [ 18, 878 ]
   id: 419704
}
{
   adult: false
   backdrop_path: "/1R6cvRtZgsYCkh8UFuWFN33xBP4.jpg"​​
   genre_ids: Array(3) [ 28, 18, 53 ]​       id: 545609
}]

но Movies [0] .backdrop_path show Movies [0] не определено

Answer 1

Скорее всего, рендеринг начинается раньше, чем приходит ответ от сервера, попробуйте добавить проверку в пустой массив

{ Movies.length &&
      <MainImage
            Image={`${MOVIE_IMAGE_URL}w1200${Movies[0].backdrop_path}`}
            title={Movies[0].original_title}
            text={Movies[0].overview}
        />
}