如何遍历数组中的数组。map function？

Question

我正在尝试在我的反应应用程序的另一个循环中迭代一个数组。 我有一个 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....}但它似乎不是一个有效的语法。 你能帮忙吗？

Answer 1

多个 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>
    )
}