使用道具获取数据 - 无法读取未定义的属性（读取 'map'）

Question

我正在用 React 制作电影应用程序。

为了获取数据，我使用了一个名为 useFetch

的自定义挂钩

我正在获取 Genre 中的流派列表。基于流派 ID，我正在创建一条新路线来呈现 MoviesFromGenre 中的电影列表。使用电影的 ID，当我点击一个 Movie 组件时，我正在创建一个到 MovieDetails 组件的新路径。

在 MovieDetails 我想添加一个 Credits 组件。为此，我将电影 ID 作为道具传递，然后根据该 ID 获取电影演职员表列表，但是当我映射数组时出现此错误： Cannot read properties of undefined (reading 'map')

沙盒link

useFetch

import { useReducer, useEffect } from "react";
import axios from "axios";

const ACTIONS = {
  FETCH_DATA: "fetch-data",
  ERROR: "error"
};

const initialState = {
  data: [],
  loading: false,
  error: null
};

function reducer(state, { type, payload }) {
  switch (type) {
    case ACTIONS.FETCH_DATA:
      return { data: payload, loading: false };
    case ACTIONS.ERROR:
      return { data: [], error: payload };
    default:
      return state;
  }
}

function useFetch(url, data) { // Passing a data argument is necessary: 
  const [state, dispatch] = useReducer(reducer, {...initialState, data});
  useEffect(() => {
    axios
      .get(url)
      .then((res) => {
        dispatch({ type: ACTIONS.FETCH_DATA, payload: res.data });
      })
      .catch((e) => {
        dispatch({ type: ACTIONS.ERROR, payload: e.error });
      });
  }, [url]);
  return state;
}
export default useFetch;

电影详情

import React, { useState } from "react";
import { useParams } from "react-router-dom";
import Credits from "../Credits/Credits";
import useFetch from "../Utils/useFetch";
import "../Utils/useFetch";
import { API_KEY, API_URL } from "../../api/requests";

function MovieDetails() {
  const { movieId } = useParams();
  const BASE_URL = `${API_URL}/movie/${movieId}?api_key=${API_KEY}`;
  const { data: movie, loading, error } = useFetch(BASE_URL, { movie: [] });
  console.log(movie);
  return (
    <div className="movie-details">
      {movie.title}
      <Credits movieId={movie.id} />
    </div>
  );
}

export default MovieDetails;

学分

import React from "react";
import useFetch from "../Utils/useFetch";
import { API_KEY, API_URL } from "../../api/requests";

function Credits(props) {
  const { movieId } = props;
  const BASE_URL = `${API_URL}/movie/${movieId}/credits?api_key=${API_KEY}`;
  const { data: credits, loading, error } = useFetch(BASE_URL, { credits: [] });
  console.log(movieId);
  return (
    <div className="credits">
      {credits.id}
      {loading
        ? "Loading"
        : credits.credits.cast.map((castMember) => <h1>{castMember}</h1>)}
      {error ? error : null}
    </div>
  );
}

export default Credits;

Answer 1

您在这里遇到的问题似乎是您正在尝试访问 credits 内的一个对象 credits，您已经可以访问 cast.

{loading ? (
    "Loading"
  ) : credits && credits.cast ? (
    credits.cast.map((castMember) => <h1>{castMember.id}</h1>)
  ) : (
    <div>{"Error fetching credits"}</div>
  )}

适合我。我为 credits 和 credits.cast 添加了额外的检查，只是为了避免在未定义时尝试访问该对象。我也将 <h1>{castMember}</h1> 更改为 <h1>{castMember.id}</h1> 因为我收到一个错误，指出该对象不是有效的 React 子对象，所以只需在此处打印出 id 以表明您现在可以访问的属性castMember.

这是更新后的沙盒： https://codesandbox.io/s/tmdb-credits-forked-xwqp1b?file=/src/Components/Credits/Credits.js:428-630

使用道具获取数据 - 无法读取未定义的属性（读取 'map'）

Fetching data using props - Cannot read properties of undefined (reading 'map')

reactjs

react-hooks