Доступ к массиву внутри объекта

Question

У меня есть функциональный компонент, который выводит значения объекта

    const MovieItemDetails = (props) => {
  return <div className='item-details'>
    <div>
      <img key={props.movieDetails.id} src={`https://image.tmdb.org/t/p/w1280${props.movieDetails.backdrop_path}`} alt={props.movieDetails.title} className='header-item-image' />
      <a href='#t' className='header-item-name'>{props.movieDetails.title}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${props.movieDetails.poster_path}`} alt={props.movieDetails.title} className='header-item-poster' />
      <h2>{props.movieDetails.genres[0].name}</h2>
    </div>
  </div>
}

Я пытаюсь получить доступ к вложенному массиву, как показано на рисунке ниже

Мне нужно имя жанра первого массива, я пробовал {props.movieDetails.genres[0].name}

, но я получаю 'TypeError: Невозможно прочитать свойство' 0 'из неопределенного'

EDIT: полный объект

Answer 1

Я бы предпочел назвать это правильно.Пожалуйста, посмотрите на следующий код.

import React from 'react'
import Header from './Header'
import Main from './Main'
const MovieItemDetails = (props) => {
  return <div className='item-details'>
    <div>
     <img key={props.movieDetails.id} src= {`https://image.tmdb.org/t/p/w1280${props.movieDetails.backdrop_path}`} alt= {props.movieDetails.title} className='header-item-image' />
     <a href='#t' className='header-item-name'>{props.movieDetails.title}</a>
     <img src={`https://image.tmdb.org/t/p/w185/${props.movieDetails.poster_path}`} alt={props.movieDetails.title} className='header-item-poster' />
     <h2>{props.movieDetails.genres[0].name}</h2>
   </div>
  </div>
}
const movieDetails = {
  id: 1,
  title: 'Movie',
  genres : [
    {id: 0, name : 'Songs'}
  ]
}
const App = () => (
  <div>
    <MovieItemDetails movieDetails={movieDetails}  />
    {MovieItemDetails({movieDetails})}
 </div>
)

приложение экспорта по умолчанию

Answer 2

Вместо того, чтобы ссылаться на вложенный массив снова и снова, лучше извлечь его в const в начале и проверить его значение перед рендерингом.Пожалуйста, смотрите ниже:

const MovieItemDetails = (props) => {
      const {movieDetails} = {...props};
      return (movieDetails && movieDetails.genres ? <div className='item-details'>
        <div>
          <img key={movieDetails.id} src={`https://image.tmdb.org/t/p/w1280${movieDetails.backdrop_path}`} alt={movieDetails.title} className='header-item-image' />
          <a href='#t' className='header-item-name'>{movieDetails.title}</a>
          <img src={`https://image.tmdb.org/t/p/w185/${movieDetails.poster_path}`} alt={movieDetails.title} className='header-item-poster' />
          <h2>{movieDetails.genres[0].name}</h2>
        </div>
      </div> : null);
}