如何在array.map函数中迭代一个数组?

我想在我的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

(0)
上一篇 1天前
下一篇 1天前

相关推荐

发表评论

登录后才能评论