У меня возникают проблемы с пониманием, почему я не могу .map для данных, которые я возвращаю в состоянии, которое я настроил в своей программе React

Question

В настоящее время я получаю сообщение об ошибке TypeError: movieData.map is not a function, которое для меня не имеет никакого смысла, когда я получаю данные из API, это массив объектов. Я загружаю данные из API в useEffect(), загружаю один раз и устанавливаю их в требуемое состояние в Обещании.

Что я упускаю / не понимаю в Ax ios и получении от него данных?

import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import { Container, Row, Col } from 'react-bootstrap';

// import Poster from './modules/Poster';

function Home() {
    const [movieData, setMovieData] = useState([]);
    // const [baseURL, setBaseURL] = useState([]);

    useEffect(() => {
        Axios.get('https://api.themoviedb.org/3/discover/movie?api_key=ae6887d6afcef7f295ee5ce27afa2389&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1')
        .then((res) => setMovieData(res.data))
        .catch(err => console.log)
    }, [])

    // useEffect(() => {
    //     Axios.get('https://api.themoviedb.org/3/configuration?api_key=ae6887d6afcef7f295ee5ce27afa2389')
    //         .then((res) => setBaseURL(res.data))
    // }, [])

    // console.log(movieData)
    return (
        <div>
            <h1>Home Page</h1>
            <Container>
                <Row>
                    {movieData.map((movie) => <div>{movie.title}</div>)}
                </Row>
            </Container>
            <img src={`http://image.tmdb.org/t/p/w500${movieData.poster_path}`} alt="poster"/>
        </div>
    )
}

export default Home;

Answer 1

Проверьте, является ли movieData массивом. Или данные кино определенно будут нулевыми.

Answer 2

Если вы console.log res.data получаете ответ от своего запроса топора ios, вы, скорее всего, обнаружите, что это объект, а не массив.

Возможно, вы захотите использовать res.data.results, чтобы получить массив результатов. Или, в качестве альтернативы, попробуйте сопоставить movieData.results, если вы хотите сохранить весь объект в состоянии. Однако, если вы делаете это, вам лучше указать состояние по умолчанию, чем пустой массив.