レスキューでforEachを使用してimgを表示できませんでした

Question

私は自分のapiから画像をレンダリングしたいのですが、まず空のかどうかを確認するためにlodashのサイズを使用します。

私は

{item.photos.toString()}を行うと、私はURLを参照してくださいすることができるよ、なぜコードの下だけでは動作しませんか？私のコンソールには何のエラーもありません。あなたの条件のオペランドが値undefinedを有するように

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

Answer 1

forEachは、何も返しません。あなたはmap（そして内部にはreturn）が欲しかったです。また、アップロードボタンのためのあなたの閉じるボタンのタグが（以下固定）tが欠落しています注意してください。

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

あなたはまた、簡潔な矢印の形を使用することができます。

に Đào Minh Hạtが提起したポイントに追加

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

his answer（> 0ではなく> 1、およびkey）：

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

Answer 2

あなたが使います条件size(item.photos) > 1のみですので写真が1枚しかない場合は表示されません。

もう一つは、ループ

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