获取 TypeError: 当在 useEffect 中尝试使用 useState 时，movieDetails.map 不是函数

Question

import { useSelector, useDispatch } from "react-redux";
import { useEffect, useState } from "react";
import request from "../../requests";
import { fetchMovies } from "../../feautures/movies/moviesSlice";
import "./SingleMoviePage.scss";
import Rating from "../../components/UI/Rating/Rating";
import axios from "axios";

const SingleMoviePage = ({ match }) => {
  const dispatch = useDispatch();
  const [movieDetails, setMovieDetails] = useState({})

  /*  params */
  const movieId = match.params.id;
  const page = match.params.page;
  const genre = match.params.genre;

  /* movies reducer handle */
  const movies = useSelector((state) => state.movies.movies);
  const moviesStatus = useSelector((state) => state.movies.status);

  /* movieDetails reducer handle */


  /* base urls */
  const baseImgUrl = "https://image.tmdb.org/t/p/original";
  const movieDetailUrl = `https://api.themoviedb.org/3/movie/${movieId}?api_key=c057c067b76238e7a64d3ba8de37076e&language=en-US`;


  
  useEffect(() => {
    const fetchData = async() => {
      let response = await axios.get(movieDetailUrl);
      response = response.data;
      setMovieDetails(response)
    }

    fetchData()

  },[movieDetailUrl])
  console.log("data: ",movieDetails )

  


  let content;
  if (moviesStatus === "loading") {
    <div>Loading ...</div>;
  } else if (moviesStatus === "succeeced") {
    let movie = movies.find((movie) => movie.id.toString() === movieId);
    content = (
      <div
        className="single-movie__container"
        style={{
          backgroundImage: `url(${
            movie.backdrop_path
              ? baseImgUrl + movie.backdrop_path
              : baseImgUrl + movie.poster_path
          })`,
        }}
      >
        <div className="single-movie__information">
          <h1 className="single-movie__title">{movie.title}</h1>
          <div className="single-movie__rate">
            <Rating
              rating={movie.vote_average}
              className="single-movie__stars"
            />
            <div className="single-movie__average">
              {movie.vote_average}(Imdb)
            </div>
          </div>
          <p className="single-movie__overview">{movie.overview}</p>
          <p className="single-movie__genres">
            <label>Genres</label>
            {
              movieDetails.genres.map(genre => {
                console.log("genre: ",genre)
                return(
                  <div>{genre.name}</div>
                )
              })
            }
          </p>
        </div>
      </div>
    );
  }

  useEffect(() => {
    if (genre === "POPULAR") {
      dispatch(fetchMovies(request.fetchPopular(page)));
    } else if (genre === "NOW PLAYING") {
      dispatch(fetchMovies(request.fetchNowPlaying(page)));
    } else if (genre === "UP COMING") {
      dispatch(fetchMovies(request.fetchUpComing(page)));
    }
  }, [dispatch, genre, page]);

  return <div className="single-movie">{content}</div>;
};

export default SingleMoviePage;

I'm trying to make a movie website with react-redux . The issue is when I try to get movie details using useEffect and try to map that in:

<p className="single-movie__genres">

I get TypeError: Cannot read property 'map' of undefined error and I get empty object ( data: {} ) using console.log("data: ", movieDetails) .

But if I refresh the page everything works well and I get data:

{
    adult: false, 
    backdrop_path: "/6MKr3KgOLmzOP6MSuZERO41Lpkt.jpg",
    ...
}

using console.log("data: ", movieDetails) . Why can't I get data when the page is first loaded?

Answer 1

It is because your initial state does not contain "genres" array inside the object. And when react tries to handle

movieDetails.genres.map(...)

it fall down because movieDetails.genres is undefined (and undefined does not support map method of course). Either include empty array in you initial state like:

const [movieDetails, setMovieDetails] = useState({genres:[]})

or use "?" operator in your chain like:

movieDetails.genres?.map(...)

Answer 2

.map method is a prototype function for type array. you should declare moviedetails as an array like this when setting the default value using useState hook.

const [movieDetails, setMovieDetails] = useState([])

Answer 3

有一点我不明白。据我所知，第一次加载组件时 useEffect 工作并在 map func 工作后用数据填充我的 movieDetails。我的意思是 js 从上到下工作，不应该填充 movieStatus数据直到涉及到地图功能？