Wie man durch ein Array mit React (Rails) iteriert

Question

Ich fing gerade an, React zu lernen und ich versuche herauszufinden, wie man einen bestimmten Wert findet, nach dem ich suche. Genauso wie Sie die Methode each.do in Ruby verwenden und ein Array durchlaufen können, versuche ich das mit React.

class Gallery extends React.Component { 
    render() { 
    // debugger; 
    return (
     <div> 
     <img> {this.props.gallery.thumbnail_url} </img> 
     </div> 
    ) 
    } 
} 

Ich versuche, die thumbnail._url zuzugreifen und wenn das Debugger, ich bin alle Objekte und Bilder zugreifen nicht in der Lage. Ich dachte an this.props.gallery.object.thumbnail_url und andere Ideen, aber ich bin nicht wirklich sicher der beste Weg!

Answer 1

Verwenden Sie Array.prototype.map(), um die Daten den reagierenden Elementen zuzuordnen. Nicht, dass Elemente, die in einer Schleife gerendert werden, eine eindeutige Kennung (keys) benötigen, um die Wiedergabeliste leistungsfähiger zu machen.

class Gallery extends React.Component { 
    render() { 
    const { gallery = [] } = this.props; // destructure the props with a default (not strictly necessary, but more convenient) 

    return (
     <div> 
     { 
     gallery.map(({ id, thumbnail_url }) => (
     <img key={ id } src={ thumbnail_url } /> 
     )) 
     } 
     </div> 
    ) 
    } 
} 

Answer 2

Sie können etwas tun:

class Gallery extends React.Component { 
    render() { 
    // initialize 'images' to empty array if this.props.gallery is undefined 
    // other wise 'images.map' will throw error 
    const images = this.props.gallery || []; 

    return (
     <div> 
     {images.map((image, index) => <img src={image.thumbnail_url} key={index} />)} 
     </div> 
    ) 
    } 
} 

Sie bemerkt key={index} die Stütze haben. Wenn Sie das weglassen, wird eine Warnung angezeigt:

Jedes Kind in einem Array oder Iterator sollte eine eindeutige haben „Schlüssel“ prop

Eigentlich ist es nicht auf die Komponente als Stütze geführt, sondern ist verwendet von React, um die Abstimmung von Sammlungen zu unterstützen. Auf diese Weise kann React mit der minimalen DOM-Änderung umgehen.