gpt4 book ai didi

javascript - 访问对象内部的数组

转载 作者:行者123 更新时间:2023-12-03 00:31:28 24 4
gpt4 key购买 nike

我有一个渲染对象值的功能组件

    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>
}

我正在尝试访问嵌套数组,如下图所示 enter image description here

我想要的是第一个数组的流派名称,我已经尝试过 {props.movi​​eDetails.genres[0].name}

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

编辑:完整对象 enter image description here

最佳答案

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

关于javascript - 访问对象内部的数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53845203/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com