reactjs 如何在React中用map功能显示对象数组中的图像链接？[duplicate]

0vvn1miw 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(70)

- 此问题在此处已有答案**：

List elements not rendering in React [duplicate]（1个答案）
When should I use a return statement in ES6 arrow functions（6个答案）
十小时前关门了。
我是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"
                    },
                ]
            },
        ...
          ],

reactjs

来源：https://stackoverflow.com/questions/67046519/how-to-show-the-image-links-in-an-array-of-an-object-with-map-function-in-react

2条答案

按热度按时间

5uzkadbs1#

***注：***我本想发表评论，但我没有足够的声誉。

您提供的代码的问题在于您没有从Map函数返回任何内容。

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

相反

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

另外如果不先循环所有注解，您可能也会遇到问题。请确保Mapcomments数组，然后再次Mapcomments_images。因为当前Map的实现是comments.comments_images，而comments是一个Array。

赞(0）回复(0）举报 2023-01-30

cedebl8k2#

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>

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 如何在React中用map功能显示对象数组中的图像链接？[duplicate]

2条答案

相关问题

热门标签

最新问答