Ошибка вывода массива через map

Question

Проблемы с выводом массива с названиями, который получил через api с сайта

Ошибка следующая: Unhandled Rejection (TypeError): moviesList.map is not a function

Код:


function PopularNow () {

    const [moviesList, setMoviesList] = useState([]);
    const [showFilms, setShowFilms] = useState(false);

    useEffect(() => {
        console.log('render');
        fetch(`https://api.themoviedb.org/3/movie/popular?api_key=af86dce348bd1eef279f0f5f78deecec&language=ru-RU&include_image_language=ru`)
            .then(res => res.json())
            .then(
                (data) => {
                    if (data.results === undefined) {
                        setShowFilms(false)
                    } else {
                        setMoviesList({
                            name: data.results.map(t => {return t.title})
                        });
                        setShowFilms(true);
                    }
                },
            );
    }, []);

       if (showFilms === false) {
           return <p>Wait a minute...</p>
       } else {
           return <div>
               <p>{moviesList.map((movie,index) => {
                   return <p>{movie.name[index]}</p>
               })}</p>
           </div>
       }


}

export default PopularNow;```

В чем проблема ? Как решить данный вопрос ? Можно ли это сделать без Redux ?

Answer 1

Не уверен, но похоже что когда data.results !== undefined и срабатывается условие else, вы в setMoviesList передаёте объект, а не массив.

setMoviesList({ // Передан объект
   name: data.results.map(t => {return t.title})
});

Однако при рендере вы обращаетесь к moviesList как к массиву. moviesList это объект, у объектов нет метода map

Попробуйте так:

function PopularNow() {
  const [moviesList, setMoviesList] = useState({});
  const [showFilms, setShowFilms] = useState(false);

  useEffect(() => {
    console.log('render');
    fetch(`https://api.themoviedb.org/3/movie/popular?api_key=af86dce348bd1eef279f0f5f78deecec&language=ru-RU&include_image_language=ru`)
      .then((res) => res.json())
      .then((data) => {
        if (data.results === undefined) setShowFilms(false);
        else {
          setMoviesList({ name: data.results.map((t) => t.title) });
          setShowFilms(true);
        }
      });
  }, []);

  if (showFilms === false) {
    return <p>Wait a minute...</p>;
  } else {
    return (
      <div>
        <p>{ moviesList.name.map((movie, index) => (<p>{ movie.name[index]}</p>)) }</p>
      </div>
    );
  }
}

Я не уверен, давно не работал с React

БЛОГ НА HUSL

Ошибка вывода массива через map

Ответы (1 шт):