React（Rails）で配列を反復する方法

Question

私は今、Reactを学び始めました。私が探している特定の値を見つける方法を見つけようとしています。あなたがRubyでeach.doメソッドを持っていて、配列を反復処理できるのと同じように、私はReactでそれをしようとしています。

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

私はthumbnail._urlにアクセスしようとしていると、デバッガを使用しているとき、私はすべてのオブジェクトと画像にアクセスすることはできませんよ。私はthis.props.gallery.object.thumbnail_urlと他のアイデアを考えましたが、私は本当に最善の方法を確信していません！

Answer 1

を使用して、データを反応要素にマッピングします。ループ内でレンダリングされる要素には、再レンダリングリストをより効率的にするために、一意の識別子（keys）が必要です。

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

あなたはこのような何かを行うことができます。

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> 
    ) 
    } 
} 

あなたは小道具key={index}を気づいているかもしれません。実はそれは小道具としてコンポーネントに渡されていない

を支える

が配列またはイテレータでそれぞれの子が「キー」のユニークなを持っている必要がありますが、次のとおりです。あなたはそれを省略した場合は、警告が表示されますコレクションの調整を支援するためにReactが使用します。このようにReactは最小のDOM変更を処理できます。