javascript - 如何在 React 中使用 map 函数显示对象数组中的图像链接？

Question

我是 React 和前端开发的新手。我的目标是让 <img src={child.s3_url} className={classes.magetty} />在 中成功工作map()，我希望页面上有很多图片。但是，图像在页面上无法正确显示（视图中只有空白区域），我使用console.log('child.s3_url: ', child.s3_url)它来确保 map() 已被触发。谁能告诉我这个问题的解决方案是什么？非常感谢！

我的代码在这里：

 <Grid className={classes.gridList}>
          {comments.comments_images.map((child,i) =>{
            <div key={i}>
              <img src={child.s3_url} className={classes.magetty} />
            </div>
            //console.log('=====s3_url=====', child.s3_url);

          })}
 </Grid>

数据如下所示：

"comments": [
            {
                "id": 4,
                "trail_id": 4,
                "date": "2009-02-05",
                "star": 4,
                "difficulty": 3,
                "comments_images": [
                    {
                        "comment_id": 1,
                        "tag_id": 1,
                        "s3_url": "https://justForTestUrl/imgs/1.jpg"
                    },
                    {
                        "comment_id": 2,
                        "tag_id": 2,
                        "s3_url": "https://justForTestUrl/imgs/2.jpg"
                    },
                    {
                        "comment_id": 3,
                        "tag_id": 3,
                        "s3_url": "https://justForTestUrl/imgs/3.jpg"
                    },
                ]
            },
        ...
          ],

标签： javascriptreactjs

Answer 1

map 函数没有返回任何东西。

试试下面的代码...

<Grid className={classes.gridList}>
    {comments.comments_images.map((child, i) => (
        <div key={i}>
            <img src={child.s3_url} className={classes.magetty} />
        </div>
    ))}
</Grid>

或者

<Grid className={classes.gridList}>
    {comments.comments_images.map((child, i) => {
        return <div key={i}>
            <img src={child.s3_url} className={classes.magetty} />
        </div>
    })}
</Grid>