我想在我的react应用程序中的另一个循环中迭代一个数组。我有一个json文件，其中包含的数据是这样的。
[
{
"id":"0001",
"photos":[
"IMG_9239.JPG",
"2019-01-07.jpg",
"IMG_9261.JPG"
]
},
{
"id":"0002",
"photos":[
"IMG_9239.JPG",
"2019-01-07.jpg",
"IMG_9261.JPG"
]
},
{
"id":"0003",
"photos":[
"IMG_9239.JPG",
"2019-01-07.jpg",
"IMG_9261.JPG"
]
}
]
这是我的react组件
const ListItems = ({data}) => {
return (
<div id="items-container">
{data.map( item => (
<p>{item.id}</p>
//iterate the [photos] array in an img tag
//<img src ="photo" />
))}
</div>
)
}
我正在尝试 {item.photos.map....} 但好像不是有效的语法。你能帮助我吗？
解决方案：
多个 JSX 元素需要一个父元素，或者至少需要一个伪父元素。这里，你可以使用一个片段 <> 作为从 .map 回调，同时包含 <p> 和 <img>s:
const ListItems = ({data}) => {
return (
<div id="items-container">
{data.map( item => (
<>
<p>{item.id}</p>
{item.photos.map(({ src }) => <img src={src}></img>}
</>
))}
</div>
)
}
本文来自投稿，不代表实战宝典立场，如若转载，请注明出处：https://www.shizhanbaodian.com/27148.html
微信扫一扫 
支付宝扫一扫 