reactjs 如何在react中使用id属性从特定对象获取数据?

lsmepo6l  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(124)
import { useParams } from "react-router-dom";
import movies from '../data/data'
import useFetch from "../useFetch";

import './Banner.css'

const MovieDetails = () => {
    const { id } = useParams();

    // destructuring the data
   movies.map((movie)=>{
    return movie.id === id
   })

    return (

        

        <div className="moviedetails">
           {movie.title}
        </div>
    );
}

export default MovieDetails;

我还尝试find()从特定对象获取数据,但总是得到这个错误
data_data__WEBPACK_IMPORTED_MODULE_0_.default.map不是一个函数或相同的,而是Map,它说查找
一旦我到达页面usind的Id使用useParams()
我只需要从一个特定的项目,匹配的网页ID,我在确切的时刻的信息
这是对象示例

const trending = [
    {
        id:11,
        title: 'Duty & love',
        name: 'Duty & love',
        row: images.dutyRow,
        cover: images.dutyCover,
        sinopsis:'Leon rescued ashley and is trying finding a way to escape the town, but at the same time Leon is seeing in Ashley  more than just a mission.',
        duration:'1h 25m',
        genrer:'Drama, Romance',
        type: 'Movie',
        rating:'PG-13'
    },

    {
        id:14,
        title: 'Her',
        name: 'Her',
        row: images.herRow,
        cover: images.herCover,
        sinopsis:'From the moment he saw ramona he got lost in her gaze. Scott will have to overcome every obstacle that prevents him from being with his beloved.',
        duration:'1h 40m',
        genrer:'Romance, Musical',
        type: 'Movie',
        rating:'PG-13'
    },

    {
        id:43,
        title: 'Pride & Prejudice',
        name: 'Pride & Prejudice',
        row: images.zeldaRow,
        cover: images.zeldaCover,
        sinopsis:'Link must overcome the sins of pride and prejudice in order to recover the Master Sword to be able to defeat Ganondorf. ',
        duration:'1h 43m',
        genrer:'Fantasy, Anime, Romance',
        type: 'Movie',
        rating:'G'
    },

    {
        id:50,
        title: 'Eclipse',
        name: 'Eclipse',
        row: images.eclipseRow,
        cover: images.eclipseCover,
        sinopsis:'The Eclipse, the nightmare in real life. Once you get the mark, there is not scape from the devil or angels..',
        duration:'2h 44m',
        genrer:'Dark Fantasy, Horror, Gore',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:32,
        title: 'T-800',
        name: 'T-800',
        row: images.t800Row,
        cover: images.t800Cover,
        sinopsis:'Created by Skynet with the purpose of protecting John Connor of any threat and keeping him safe so the in future they can still have a chance agains the machines',
        duration:'1h 65m',
        genrer:'Action, Futuristic',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:30,
        title: 'Blade Runner 2049',
        name: 'Blade Runner 2049',
        row: images.RunnerRow,
        cover: images.RunnerRow,
        sinopsis:'After thirty years of the original movie, a blade runner called Rigby who is looking for clues to the whereabouts of a replicant',
        duration:'2h 15m',
        genrer:'Cyberpunk, Romance, Action',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:22,
        title: 'Usurper',
        name: 'Usurper',
        row: images.usurperRow,
        cover: images.usurperCover,
        sinopsis:'From being the best friends, to enemies. Princess Rhaeny will star a war after losing the throne and her son. ',
        duration:'58m',
        genrer:'Novel, Fantasy, Drama',
        type: 'TV Series',
        rating:'NC-17'
    },

    {
        id:44,
        title: 'Vampire Diaries',
        name: 'Vampire Diaries',
        row: images.vampireRow,
        cover: images.vampireCover,
        sinopsis:'A vampire group that dedicates to help other vampires to find love.',
        duration:'58m',
        genrer:'Comedy, Romance',
        type: 'TV Series',
        rating:'PG-13'
    },

    {
        id:58,
        title: "American Werewolf",
        name: "American Werewolf",
        row: images.werewolfRow,
        cover: images.werewolfCover,
        sinopsis:'An American werewolf in new york looking for fresh meat ',
        duration:'1h 33m',
        genrer:'Suspense, Paranormal, Canine',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:18,
        title: 'Empty',
        name: 'Empty',
        row: images.moonRow,
        cover: images.moonCover,
        sinopsis:' "I promise I will take you to the Moon, No matter how much it takes." ',
        duration:'24m',
        genrer:'Cyberpunk, Romance, Action',
        type: 'TV Series',
        rating:'NC-17'
    },

    {
        id:53,
        title: 'The Mansion',
        name: 'The Mansion',
        row: images.luigiRow,
        cover: images.luigiCover,
        sinopsis:'Luigi explores a haunted mansion, and searches for Mario and deals with ghosts by capturing them through a vacuum cleaner supplied by Professor E.',
        duration:'1h 42m',
        genrer:'Horror, Paranormal',
        type: 'Movie',
        rating:'PG-13'
    },

    {
        id:25,
        title: 'Space Guardian',
        name: 'Space Guardian',
        row: images.guardiansRow,
        cover: images.guardiansCover,
        sinopsis:'Guardians of the cosmos, the space and the world. leela and her crew will always watch for us.',
        duration:'1h 17m',
        genrer:'Anime, Mechas',
        type: 'Movie',
        rating:'G'
    }

]
nzkunb0c

nzkunb0c1#

<div className="moviedetails">
         {movie.title}  // ?
    </div>

这部“电影”从何而来?
试试这个:

const MovieDetails = () => {
   const { id } = useParams();
   const [movie, setMovie] = useState(null);

   function getMovie() {
        const data = movies.filter(movie => movie.id === id)[0];
        setMovie(prev => data);
   }

   useEffect(() => {
       getMovie();
   }, []);

    return (
        <div className="moviedetails">
           {movie.title}
        </div>
    );
}

相关问题