无法访问对象

我是一个初学者，开始学习React Router。我做了一个json服务器来存储包含电影的json文件的假api。当前，我有一个页面，仅在列表中列出电影的标题。这些是从json服务器动态检索的，而不是用html硬编码的。

我的目标是单击标题的这些链接之一，并显示更详细的信息，例如描述，运行时，类型等。这是我遇到麻烦的地方。单击链接时，我无法显示详细信息。当我console.log对象时，它会显示相应的电影对象及其详细信息。但是，当我返回信息时，它无法访问该对象。我已经附上了json。

我尝试将fetchMovie变量更改为包含get：

const fetchMovie = await fetch(`http://localhost:3000/movies/get?id=${match.params.id}`); 
//pass match variable to query json. This returned a 404 error

我遇到问题的行是{movie.title}行。它无法访问电影对象。

在此处 输入图像描述在此处输入图像描述

import React, { useEffect, useState } from 'react';
import './MovieDetail.css';
import styled from 'styled-components';
import { Link } from 'react-router';

function MovieDetail({ match })  {

useEffect(() => {
    fetchMovie(); //call fetch function
    console.log(match);

}, []);

const [movie, setMovie] = useState({});

/*const movies = [
    { id: 1, title: 'The Fast and the Furious: Hobbs and Shaw', description: 'Lawman Luke Hobbs and outcast Deckard Shaw form an unlikely alliance when a cyber-genetically enhanced villain threatens the future of humanity.', director: 'David Leitch', year: 2019, budget: '200000000', runtime: '137', rating: 'PG-13', genre: 'Action', Trailer: 'https://www.youtube.com/watch?v=HZ7PAyCDwEg'},
    { id: 2, title: 'Terminator: Dark Fate', description:'Sarah Connor and a hybrid cyborg human must protect a young girl from a newly modified liquid Terminator from the future.', director: 'Tim Miller', year: 2019, budget:'200000000', runtime: '141', rating: 'R', genre: 'Action, Sci-Fi', Trailer: 'https://www.youtube.com/watch?v=oxy8udgWRmo'},
    { id: 3, title: 'Avengers: Endgame', description:'Adrift in space with no food or water, Tony Stark sends a message to Pepper Potts as his oxygen supply starts to dwindle. Meanwhile, the remaining Avengers -- Thor, Black Widow, Captain America and Bruce Banner -- must figure out a way to bring back their vanquished allies for an epic showdown with Thanos -- the evil demigod who decimated the planet and the universe', director: 'Anthony and Joe Russo', year: 2019, budget: '356000000', runtime: '181', rating: 'PG-13', genre: 'Action, Sci-Fi, Adventure', Trailer: 'https://www.youtube.com/watch?v=TcMBFSGVi1c'},
    { id: 4, title: 'It: Chapter Two', description:'Twenty-seven years after their first encounter with the terrifying Pennywise, the Losers Club have grown up and moved away, until a devastating phone call brings them back.', director: 'Andy Muschietti', year: 2019, budget:'79000000', runtime: '169', rating: 'R', genre: 'Horror, Drama, Fantasy', Trailer: 'https://www.youtube.com/watch?v=xhJ5P7Up3jA'},
    { id: 5, title: 'Ad Astra', description:'Astronaut Roy McBride undertakes a mission across an unforgiving solar system to uncover the truth about his missing father and his doomed expedition that now, 30 years later, threatens the universe.', director: 'James Gray', year: 2019, budget:'87500000', runtime: '123', rating: 'PG-13', genre: 'Adventure, Drama, Mystery', Trailer: 'https://www.youtube.com/watch?v=BsCNKuB93BA'},
    { id: 6, title: 'Lion King (2019)', description:'After the murder of his father, a young lion prince flees his kingdom only to learn the true meaning of responsibility and bravery.', director: 'Jon Favreau', year: 2019, budget:'87500000', runtime: '119', rating: 'PG', genre: 'Animation, Adventure, Drama', Trailer: 'https://www.youtube.com/watch?v=Raf9bVk75s8'},
    { id: 7, title: 'Rambo: Last Blood', description:'Rambo must confront his past and unearth his ruthless combat skills to exact revenge in a final mission.', director: 'Adrian Grunberg', year: 2019, budget:'50000000', runtime: '89', rating: 'R', genre: 'Action, Adventure, Thriller', Trailer: 'https://www.youtube.com/watch?v=YPuhNtG47M0'},
    { id: 8, title: 'Angry Birds 2', description:'The flightless birds and scheming green pigs take their feud to the next level.', director: 'Thurop Van Orman, John Rice', year: 2019, budget:'65000000', runtime: '97', rating: 'PG', genre: 'Animation, Adventure, Comedy', Trailer: 'https://www.youtube.com/watch?v=nQJlFpMprl4'},
    { id: 9, title: 'Gemini Man', description:'An over-the-hill hitman faces off against a younger clone of himself ', director: 'Ang Lee', year: 2019, budget:'138000000', runtime: '117', rating: 'PG-13', genre: 'Action, Drama, Sci-Fi', Trailer: 'https://www.youtube.com/watch?v=AbyJignbSj0'},
    { id: 10, title: 'Joker (2019)', description:'In Gotham City, mentally-troubled comedian Arthur Fleck is disregarded and mistreated by society. He then embarks on a downward spiral of revolution and bloody crime. This path brings him face-to-face with his alter-ego: \"The Joker\".', director: 'Todd Phillips', year: 2019, budget:'55000000', runtime: '122', rating: 'R', genre: 'Crime, Drama, Thriller', Trailer: 'https://www.youtube.com/watch?v=5btyBWXgl44'},
    { id: 11, title: 'Toy Story 4', description:'When a new toy called \"Forky\" joins Woody and the gang, a road trip alongside old and new friends reveals how big the world can be for a toy.', director: 'Josh Cooley', year: 2019, budget:'200000000', runtime: '100', rating: 'G', genre: 'Animation, Adventure, Comedy', Trailer: 'https://www.youtube.com/watch?v=tmaLetrWPxQ'},
    { id: 12, title: 'Spider-Man: Far From Home', description:'Following the events of Avengers: Endgame (2019), Spider-Man must step up to take on new threats in a world that has changed forever.', director: 'Jon Watts', year: 2019, budget:'160000000', runtime: '129', rating: 'PG-13', genre: 'Action, Adventure, Sci-Fi', Trailer: 'https://www.youtube.com/watch?v=Nt9L1jCKGnE'},


  ]*/

const fetchMovie = async () => {
    const fetchMovie = await fetch(`http://localhost:3000/movies?id=${match.params.id}`); 

    const movie = await fetchMovie.json();

    setMovie(movie); //setstate
    console.log(movie); //object shows up fine here 


};


return (

        <div className="card-movie">
            Test
            <h2>{movie.title}</h2><br/>   **<--not getting access to object**

        </div>
);

}

export default MovieDetail