时间戳

首页 > 解决方案 > 如何遍历 array.map 函数中的数组？

javascript - 如何遍历 array.map 函数中的数组？

问题描述

我正在尝试在我的反应应用程序的另一个循环中迭代一个数组。我有一个 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"
        ]
    }
]

这是我的反应组件：

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....}，但它似乎不是有效的语法。你能帮忙吗？

标签： javascriptreactjs

解决方案

多个 JSX 元素需要一个父级，或者至少一个伪父级。在这里，您可以使用片段作为从回调<>返回的内容的父级，同时包含 the和s：.map<p><img>

const ListItems = ({data}) => {
    return (
        <div id="items-container">
            {data.map( item => (
                <>
                    <p>{item.id}</p>
                    {item.photos.map(({ src }) => <img src={src}></img>}
                </>
            ))}
        </div>
    )
}

推荐阅读