Javascript 无法在react中使用forEach显示img

我想从我的api渲染图像，我首先使用lodash的大小来检查数组是否为空，如果为空，则显示上载按钮，否则只渲染图像

当我这样做的时候

{item.photos.toString（）}

我可以看到url，但为什么下面的代码不起作用？在我的控制台中没有任何错误

<div id="photo_upload">
    {size(item.photos) > 1 ? 
    item.photos.forEach(photo =>{
       <img src={photo} />
    })
    : <div><button>Upload</buton>
    </div>}
</div>

{尺寸（项目照片）>1？
item.photos.forEach（照片=>{
})
：上传
}

forEach

不返回任何内容，因此条件中的操作数将具有未定义的值。您需要

映射

（以及

返回

）。另请注意，上载按钮的关闭按钮标签缺少一个

t

（修复如下）：

---

您仅使用条件

大小（item.photos）>1

，以便在只有1张照片时不会显示

另一件事是，在执行循环时，应该为每个元素添加键

item.photos.forEach(photo =>{
       <img key={photo} src={photo} />
    })

item.photos.forEach（photo=>{
})

在我们两人之间，我们有一个涵盖所有问题的答案。：-）第一个代码块，第二个，为什么需要返回一个不是？将语句放在同一行中，则不需要返回？我很困惑。@Mellisa:Arrow函数有两种形式：Verbose（在函数体周围使用

{…}

，需要使用

return

来返回某些内容）和简明（在函数体周围不使用

{…}

，主体必须是表达式[而不是语句]，并自动返回表达式的结果）。换行符与此无关，是

{…}

或缺少换行符造成了差异。我可以在一行中写出详细的表单，也可以在多行中写出简洁的表单。

<div id="photo_upload">
    {size(item.photos) > 1 ? 
    item.photos.map(photo => <img src={photo} />)
    : <div><button>Upload</button>
    </div>}
</div>

<div id="photo_upload">
    {size(item.photos) > 0 ? 
    item.photos.map(photo => <img key={photo} src={photo} />)
    : <div><button>Upload</button>
    </div>}
</div>

item.photos.forEach(photo =>{
       <img key={photo} src={photo} />
    })