API 为我的所有动态类别返回未定义

Question

我正在制作一个模拟电影搜索引擎，其中初始搜索结果将根据搜索词提取电影数组，在您单击特定电影上的“查看更多”后，您需要有关该网站上所有类别的更多详细信息相应的组件页面全部返回未定义。我不知道我哪里错了。

这是用于初始搜索的代码组件

import axios from "axios";
import React, { useEffect, useState } from "react";
import Nav from "../ui/Nav";
import { Navigate, useParams } from "react-router-dom";

const API_URL = "http://www.omdbapi.com/?apikey=cca6a59";

function Movies() {
  const [movies, setMovies] = useState([]);
  const params = useParams();
  const title = params.id;
  const [loading, setLoading] = useState(true);

  function onSearch() {
    setTimeout(() => {
      fetchMovies(movies);
      Navigate(`/moviecard/${movies}`)
    })
    fetchMovies(movies)
  }


  async function fetchMovies(title) {
    const { data } = await axios.get(`${API_URL}&s=${title}`);
    setMovies(data.Search);
    setLoading(false);
  }

  useEffect(() => {
    fetchMovies(title);
  }, [title]);
  return (
    <>
      <Nav />
      <div className="movie__row">
        <div className="movie__wrapper">
          {loading
            ? new Array(8).fill(0).map((_, index) => (
                <div className="movie" key={index}>
                  <div className="movie__img--skeleton">
                    <div className="movie__title--skeleton">
                      <div className="movie__year--skeleton"></div>
                    </div>
                  </div>
                </div>
              ))
            : movies.map((movie) => (
                <div className="movie" key={movie.id}>
                  <div className="movie__img">
                    <img src={`${movie.Poster}`} alt="poster" />
                    <div className="movie__content">
                      <h1>{movie.Title}</h1>
                      <h1>{movie.Year}</h1>
                      <p onClick={() => onSearch()}>SEE MORE</p>
                    </div>
                  </div>
                </div>
              ))}
        </div>
      </div>
    </>
  );
}

export default Movies;

单击特定电影卡上的“查看更多”后，页面将导航到此处所示的我的 MovieCard 组件

import React from "react";
import Nav from "../ui/Nav";
import axios from "axios";

const MovieCard = ({ movie: {Released, Actors, Genre, Director, Writer, Language, Plot } })

const API_URL = "http://www.omdbapi.com/?apikey=cca6a59";

async function moveDesc(imdbID) {
    const { movie } = await axios.get(`${API_URL}&i=${imdbID}`);
}

function Moviecard() {
  return (
    <>
      <Nav />
      <div className="movie__img--wrapper">
        <h1>${movie.Title}</h1>
        <img src={`${movie.Poster}`} alt="" />
      </div>
      <div className="movie__info--wrapper" key={imdbID}>
        <h3>
          <span className="red">Released: </span>${movie.Released}
        </h3>
        <h3>
          <span className="red">Actors: </span>${movie.Actors}
        </h3>
        <h3>
          <span className="red">Genre: </span>${movie.Genre}
        </h3>
        <h3>
          <span className="red">Director: </span>${movie.Director}
        </h3>
        <h3>
          <span className="red">Writer: </span>${movie.Writer}
        </h3>
        <h3>
          <span className="red">Language: </span>${movie.Language}
        </h3>
        <h3>
          <span className="red">Plot: </span>${movie.Plot}
        </h3>
      </div>
    </>
  );
}

export default Moviecard;

应该显示的是电影描述以及每个特定 imdbID 的动态类别，但在导航到特定电影后，我不断收到此图像错误图像中显示的未定义错误

在此处输入图像描述导航到特定电影后出现错误图像

这也是 github 存储库的链接 GitHub

Answer 1

我仍然不明白你的 MovieCard 组件中的 api 调用需要什么？