如何在 react 应用程序中访问获取的 json 值

问：

这是我在平台上的第一篇帖子。我希望它会很清楚。

我正在使用 tmdb API 开发一个 react 电影应用程序。fetch 工作并返回一个包含 20 个对象（电影）的数组。我可以映射数组访问所有电影的值，但我不能对一部特定的电影做同样的事情。

例如，我可以显示所有海报，但是如果我只想访问一张海报或一部特定电影（如 id）中的任何值，我会得到：

未捕获的 TypeError：无法读取 undefined 的属性（读取“id”）。

我在控制台中注意到，当我记录它时，它运行了 4 次。它两次返回 undefined，然后返回对象两次。movieList[1]

Movie react 组件

import React, { useEffect, useState } from 'react';
import tmdb from '../api/tmdb';

function Movie() {

    const [movieList, setMovieList] = useState([])
    
    useEffect(() => {
      const getMovieList = async () => {
        const {data} = await tmdb.get('/discover/movie?')
        setMovieList(data.results)
      }
      getMovieList()
    },[])

    console.log(movieList) // this works
    console.log(movieList[1]) // this works
    console.log(movieList[1].id) // this returns "Uncaught TypeError: Cannot read properties of undefined (reading 'id')"

  return (
    <div>

        {/* this works and renders a list of posters */}

        {movieList.map((movie) => (
          <img alt={""} style={{width:"300px", marginLeft:"10px", marginTop:"10px"}} src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}/>
          ))}


        {/* this returns 'Uncaught TypeError: Cannot read properties of undefined (reading 'id')' */}

        <img alt={""} style={{width:"300px", marginLeft:"10px", marginTop:"10px"}} src={`https://image.tmdb.org/t/p/w500${movieList[1].poster_path}`}/>
    </div>
  )
}


export default Movie

fetch 组件：

import axios from 'axios';

export default axios.create({
    baseURL: 'http://api.themoviedb.org/3',
    headers: {
        accept: "application/json"
    },
    params: {
        api_key:'key here'
    }
})

电影对象示例

{
    "adult": false,
    "backdrop_path": "/rMvPXy8PUjj1o8o1pzgQbdNCsvj.jpg",
    "genre_ids": [
        28,
        12,
        53
    ],
    "id": 299054,
    "original_language": "en",
    "original_title": "Expend4bles",
    "overview": "Armed with every weapon they can get their hands on and the skills to use them, The Expendables are the world’s last line of defense and the team that gets called when all other options are off the table. But new team members with new styles and tactics are going to give “new blood” a whole new meaning.",
    "popularity": 1489.424,
    "poster_path": "/mOX5O6JjCUWtlYp5D8wajuQRVgy.jpg",
    "release_date": "2023-09-15",
    "title": "Expend4bles",
    "video": false,
    "vote_average": 6.3,
    "vote_count": 254
}