使用 React 从对象中查找特定数据

Question

所以我使用 fetch 来获取具有电影数据的对象，我如何从该对象获取特定数据？我添加了一个我正在使用的对象的示例，我可以设置名称、流派、演员表、预告片、推荐等内容，然后映射它们，但我遇到的问题是获得认证一个名为结果的数组。我已经达到 release_dates.results 但之后我无法指定 'GB' 然后认证。

Object
  adult: false
  backdrop_path: "/1Rr5SrvHxMXHu5RjKpaMba8VTzi.jpg"
  belongs_to_collection: {id: 531241, name: 'Spider-Man (Avengers) Collection', poster_path: '/nogV4th2P5QWYvQIMiWHj4CFLU9.jpg', backdrop_path: '/AvnqpRwlEaYNVL6wzC4RN94EdSd.jpg'}
  budget: 200000000
  credits: {cast: Array(59), crew: Array(97)}
  genres: (3) [{…}, {…}, {…}]
  homepage: "https://www.spidermannowayhome.movie"
  id: 634649
  imdb_id: "tt10872600"
  original_language: "en"
  original_title: "Spider-Man: No Way Home"
  overview: "Peter Parker is unmasked and no longer able to separate his normal life from the high-stakes of being a super-hero. When he asks for help from Doctor Strange the stakes become even more dangerous, forcing him to discover what it truly means to be Spider-Man."
  popularity: 7811.558
  poster_path: "/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg"
  production_companies: (3) [{…}, {…}, {…}]
  production_countries: [{…}]
  recommendations: {page: 1, results: Array(21), total_pages: 2, total_results: 40}
  release_date: "2021-12-15"
  release_dates:
    results: Array(35)
    0: {iso_3166_1: 'DE', release_dates: Array(2)}
    1: {iso_3166_1: 'UA', release_dates: Array(1)}
    2: {iso_3166_1: 'SK', release_dates: Array(1)}
    3: {iso_3166_1: 'MX', release_dates: Array(1)}
    4: {iso_3166_1: 'AU', release_dates: Array(1)}
    5: {iso_3166_1: 'TR', release_dates: Array(1)}
    6: {iso_3166_1: 'HU', release_dates: Array(2)}
    7:
      iso_3166_1: "GB"
      release_dates: Array(1)
      0:
      certification: "12A"
      iso_639_1: null
      note: ""
      release_date: "2021-12-15T00:00:00.000Z"
      type: 3
      [[Prototype]]: Object
      length: 1
      [[Prototype]]: Array(0)
      [[Prototype]]: Object
    8: {iso_3166_1: 'IT', release_dates: Array(1)}
    9: {iso_3166_1: 'AR', release_dates: Array(1)}
    10: {iso_3166_1: 'PE', release_dates: Array(1)}
    11: {iso_3166_1: 'NZ', release_dates: Array(1)}
    12: {iso_3166_1: 'IN', release_dates: Array(1)}
    13: {iso_3166_1: 'FI', release_dates: Array(1)}
    14: {iso_3166_1: 'CA', release_dates: Array(1)}
    15: {iso_3166_1: 'RU', release_dates: Array(1)}
    16: {iso_3166_1: 'ES', release_dates: Array(1)}
    17: {iso_3166_1: 'PH', release_dates: Array(1)}
    18: {iso_3166_1: 'PL', release_dates: Array(1)}
    19: {iso_3166_1: 'CZ', release_dates: Array(1)}
    20: {iso_3166_1: 'SG', release_dates: Array(1)}
    21: {iso_3166_1: 'GR', release_dates: Array(1)}
    22: {iso_3166_1: 'TH', release_dates: Array(1)}
    23: {iso_3166_1: 'HK', release_dates: Array(1)}
    24: {iso_3166_1: 'JP', release_dates: Array(1)}
    25: {iso_3166_1: 'IE', release_dates: Array(1)}
    26: {iso_3166_1: 'KR', release_dates: Array(1)}
    27: {iso_3166_1: 'RO', release_dates: Array(1)}
    28: {iso_3166_1: 'BR', release_dates: Array(2)}
    29: {iso_3166_1: 'US', release_dates: Array(2)}
    30: {iso_3166_1: 'TW', release_dates: Array(1)}
    31: {iso_3166_1: 'SE', release_dates: Array(1)}
    32: {iso_3166_1: 'NL', release_dates: Array(1)}
    33: {iso_3166_1: 'FR', release_dates: Array(2)}
    34: {iso_3166_1: 'CH', release_dates: Array(1)}
    length: 35
    [[Prototype]]: Array(0)
    [[Prototype]]: Object
  revenue: 1386428198
  runtime: 148
  spoken_languages: (2) [{…}, {…}]
  status: "Released"
  tagline: "The Multiverse unleashed."
  title: "Spider-Man: No Way Home"
  video: false
  videos: {results: Array(21)}
  vote_average: 8.4
  vote_count: 3610

import React, {useState, useEffect} from 'react'
import { useLocation } from 'react-router';
import { Nav} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar, faPlay, faHeart, faShare} from '@fortawesome/free-solid-svg-icons'
import {Helmet} from "react-helmet";
import { ScrollCard } from './ScrollCard';

import { Alert } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';

export const FilmPage = () => {
    const [details, setDetails] = useState([]);
    const [genres, setGenres] = useState([]);
    const [cast, setCast] = useState([]);
    const [trailer, setTrailer] = useState();
    const [recommendations, setRecommendations] = useState([]);
    const [watch, setWatch] = useState([]);
    const location = useLocation();    

    
    useEffect( () => { 
        fetch(`https://api.themoviedb.org/3/movie/${location.state}?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&append_to_response=release_dates,videos,credits,recommendations&region=GB`)
        .then((res) => res.json())
        .then((data) => {
            if (!data.errors) {
                setDetails(data); 
                setGenres(data.genres); 
                setCast(data.credits.cast); 
                setTrailer(data.videos.results[0]?.key)
                setRecommendations(data.recommendations.results)
            }else{
                <Alert variant="danger">Error</Alert>
            }
        })
    // eslint-disable-next-line
    }, [])
    
    useEffect( () => { 
        fetch(`https://api.themoviedb.org/3/movie/${location.state}/watch/providers?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&region=GB`)
        .then((res) => res.json())
        .then((data) => {
            if (!data.errors) {
                console.log(data)
                setWatch(data.results.GB.flatrate)
            }else{
                <Alert variant="danger">Error</Alert>
            }
        })
    // eslint-disable-next-line
    }, [])
    

    return (
        <div>
            <Helmet>
                <style>{'body { background-color: black; }'}</style>
            </Helmet>
            <div className='details-container mt' style={{backgroundImage: `url(https://image.tmdb.org/t/p/original/${details.backdrop_path})`}}>
                <div className="details-content">
                    <div className="details-content__poster-container mx-5"> 
                        <img className="poster" 
                            src={`https://image.tmdb.org/t/p/w300/${details.poster_path}`} 
                            alt= {details.title}
                        />
                    </div>
                    <div className="details-content__info">
                        <div className="header mb-1">
                            <h3 className="title">{details.title}</h3>
                            <div className="rating translate-left rounded-pill mx-3">
                                <FontAwesomeIcon icon={faStar} className="star"/>
                                {details.vote_average}
                            </div>
                        </div>
                        {genres && (
                            <div className="genres-container">
                                {genres.slice(0,3).map(genreName => (
                                <p className="genres" key={genreName.id}>
                                    {genreName.name}
                                </p>
                            ))}
                            </div>
                        )}
                        <p className="description">{details.overview}</p>
                        <div className="card-btn">
                            <div className="icons">
                                <a className="details icon-btn mx-2" target="__blank" href={`https://www.youtube.com/watch?v=${trailer}`}><FontAwesomeIcon className='play' icon={faPlay} /> Trailer</a>
                                <a href className="details icon-btn mx-2"><FontAwesomeIcon icon={faHeart} /></a>
                                <a href className="details icon-btn  mx-2"><FontAwesomeIcon icon={faShare} /> </a>
                            </div>
                        </div>
                        <div className='watch-icons scroller-container'>  
                        <h5>Where To Watch</h5>
                        {watch && (
                            <div className='scroller'>
                                {watch.map(watchProvider => (
                                    <img 
                                        className='watch-icons__logo' 
                                        src={`https://image.tmdb.org/t/p/original/${watchProvider.logo_path}`}
                                        alt= {watchProvider.provider_name}
                                    />
                                ))}
                            </div>
                        )}
                        </div>
                    </div>
                </div>
            </div>
            <div className='scroll-container'>
                <h4>Cast</h4>
                {cast && (
                    <div className="scroll-container__content scroller">
                        {cast.slice(0,22).map(castName => (
                            <Nav.Link as={NavLink} exact={true} to={{pathname:`/cast/${castName.id}`, state: castName.id }} className="hidden-link" >                
                            <div className="scroll-container__card" key={castName.id}>
                                <div className="scroll-container__profile">
                                    <img className="scroll-container__img"
                                    src={`https://image.tmdb.org/t/p/w500/${castName.profile_path}`}
                                    alt= {castName.name}
                                    />
                                </div>
                                <div className="scroll-container__name">
                                    <h6 className="name">{castName.name}</h6>
                                </div>
                            </div>
                           </Nav.Link>
                        ))}
                    </div>
                )}
            </div>
            <div className="scroll-container films">
                <h4>Recommended</h4>
                {recommendations && (
                   <div className='scroller' >
                       {recommendations.slice(0,15).map(movieresults => (
                            <ScrollCard movieresults={movieresults} key={movieresults.id}/>
                        ))}
                   </div>       
                )}
            </div>
        </div>

    )
}

Answer 1

Try this

let GBdata= (Object?.release_dates?.results.filter(x=>x.iso_3166_1==="GB");
console.log(GBdata);

Answer 2

您想使用 find 遍历数组中的所有结果和 return 匹配条件的第一个结果。 shorthand 是这样的：

const result = data.release_dates.results.find({iso_3166_1} => iso_3166_1 === 'GB')

使用 React 从对象中查找特定数据

Find specific data from object using React

javascript

arrays

reactjs

themoviedb-api