使用道具獲取資料-無法讀取未定義的屬性（讀取“地圖”）

我正在用 React 制作電影應用程式。

為了獲取資料，我使用了一個名為useFetch

我正在獲取 中的流派串列Genre。基于流派 id，我正在創建一個新的路由來呈現電影串列MoviesFromGenre。使用電影的 id，當我單擊一個Movie組件時，我正在創建一個到MovieDetails組件的新路由。

在MovieDetails我想添加一個Credits組件。為此，我將電影 ID 作為道具傳遞，然后基于該 ID 獲取電影學分串列，但是當我映射陣列時出現此錯誤： Cannot read properties of undefined (reading 'map')

沙盒鏈接

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: https://stackoverflow.com/questions/71668249/cant-map-fetched-data-from-custom-usefetch-hook
  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;

uj5u.com熱心網友回復：

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>因為然后我收到一個錯誤，即該物件不是有效的反應子級，因此只需在此處列印 id 以表明您現在可以訪問castMember.

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

標籤：反应 反应钩子

上一篇：為什么不<navBar/>呈現？（反應.js）

下一篇：在Next.js中重繪頁面后無法獲取資料