javascript - 访问对象内部的数组

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.movi​​eDetails.genres[0].name}

但我收到“类型错误:无法读取未定义的属性“0””

编辑:完整对象

Answer 1

与其一次又一次地引用嵌套数组，不如在开始时将其提取到 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);
}