Reactjs 从获取的JSON API调用传播图像时出现问题

我创建此代码是为了使用来自API调用的图像呈现不同的卡：

import React from "react";
import './IGPostCard.style.scss'

export const PostCard = ({timelinePhotos}) => (
        <div className='postContainer'>
            
            {
                timelinePhotos.filter((item, idx) => idx < 12)
                    .map(({id, display_url}) => (
                        <img className='cardTemplate' key={id} src={display_url}/>
                    ))
            }
        </div>
    )

从“React”导入React；
导入“./ig明信片.style.scss”
导出常量明信片=（{timelinePhotos}）=>(
{
timelinePhotos.filter（（项目，idx）=>idx<12）
.map（{id，display_url}）=>(
))
}
)

可在此处找到完整项目的链接：

这是从console.log获取的API数据，显示在开发控制台中：

我不太擅长使用map函数，所以我很可能在它的实现中犯了错误。 理论上，我应该能够循环遍历这个数组，从每个组件中提取display\uURL并呈现它

---

如有任何帮助，将不胜感激。：）

假设

timelinePhotos

prop是您在屏幕截图中包含的数组，使用

array.map来迭代这些项目的正确方法如下：

const PostCard = ({ timelinePhotos }) => (
  <div className="postContainer">
    {timelinePhotos
      .filter((item, idx) => idx < 12)
      .map(({ node }) => (
        <img 
          className="cardTemplate" 
          key={node.id} 
          src={node.display_url} 
        />
      ))
    }
  </div>
);

非常感谢你这非常有效，我从中学到了很多。我非常感激，非常感谢@尼克：太好了！很高兴我能帮忙。