konnte nicht img angezeigt werden mit forEach in reagieren

Ich möchte Bild von meinem api zu rendern, habe ich zuerst Größe von lodash zu überprüfen, das Array ist leer oder nicht, wenn es leer ist, zeigen Sie den Upload-Button, sonst nur die Bilder rendern.konnte nicht img angezeigt werden mit forEach in reagieren

Wenn ich

{item.photos.toString()} ich in der Lage bin die URL, um zu sehen, aber unter Code warum funktioniert einfach nicht? überhaupt kein Fehler in meiner Konsole.

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

Quelle

2017-03-06 Mellisa

forEach gibt nichts zurück, so dass Operanden in Ihrem bedingten wird undefined den Wert haben. Sie wollten map (und return drin). Beachten Sie auch, Ihre Schließung Schaltfläche Tag für den Upload-Button fehlt ein t (Fest unten):

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

Sie auch die prägnante Pfeilform verwenden können:

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

in den Punkten von Đào Minh Hạt angehoben Hinzufügen in his answer (> 0 statt > 1 und key):

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

Quelle

2017-03-06 08:21:51

den ersten Block des Codes und zweitens, warum braucht man zurückkehren man nicht? Setzen Sie die Anweisung in die gleiche Zeile und die Rückgabe wird nicht benötigt. Ich bin verwirrt. – Mellisa

@Mellisa: Arrow-Funktionen haben zwei Formen: * Verbose * (wo Sie '{...}' um den Funktionskörper verwenden und 'return' verwenden müssen, um etwas zurückzugeben) und * concise * (verwenden Sie nicht '{...}' Um den Körper muss der Körper ein Ausdruck [keine Aussage] sein, und das Ergebnis des Ausdrucks wird automatisch zurückgegeben. Zeilenumbrüche haben damit nichts zu tun, es ist das "oder", das den Unterschied macht. Ich hätte die ausführliche Form alle in einer Zeile schreiben können, und ich hätte das über mehrere Zeilen verteilte Kurzformblatt schreiben können. –

Ich sehe, vielen Dank, habe heute etwas gelernt. – Mellisa

Sie verwenden Bedingung size(item.photos) > 1 nur so, es wird nicht angezeigt, wenn Sie nur 1 Foto haben.

Eine andere Sache ist, dass Sie Schlüssel für jedes Element hinzufügen sollte, während die Schleife tun

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

Quelle

2017-03-06 08:22:41

Zwischen uns haben wir eine Antwort auf alle Fragen. :-) –

konnte nicht img angezeigt werden mit forEach in reagieren

Antwort

Verwandte Themen