オブジェクトとの反応でJSXリストを作成する

Question

したがって、Reactでデータのリストを作成するときは、通常、マップ関数を使用します。しかし、それは配列のためだけに働くので、私はオブジェクトを持っているので、これについてどうやって行くのかは分かりません。私はそれをやろうとしていますか

だから、私はここに、これらの各オブジェクト内に含まれるURLから画像をレンダリングしようとしている、としています

[Object, Object, Object] 
0:Object 
1:Object 
2:Object 
length:3 
__proto__:Array[0] 

次のオブジェクトをされています。

import React from 'react'; 

const EvolutionChainComponent = ({data}) => { 
    console.log(data); 
    for(let key in data){ 
     console.log(data[key]); 
     return(
      <div> 
       <img src={data[key].sprites.front_default} role='presentation'/> 
      </div> 
     ) 
    } 
} 

export default EvolutionChainComponent; 

私はforループを使用しているので、一度divを返すとコードがループから抜けてしまうという問題があります。私はオブジェクトを反復することでこれを行う簡単な方法があると確信していますが、配列上のマップ関数で使用されたReactデータの反復しか見たことがないので、それが何であるかはわかりません。

Answer 1

オブジェクトを反復処理する必要はありませんがオブジェクトの配列をループするには

import React from 'react'; 

const EvolutionChainComponent = ({data}) => { 
    console.log(data); 
    data.map(function(item){ 
     return(
      <div> 
       <img src={item.sprites.front_default} role='presentation'/> 
      </div> 
     ) 
    }) 

} 

export default EvolutionChainComponent; 

Answer 2

あなたはキーの上にマッピングして、代わりにちょうど1要素の要素の配列を返すためにObject.keysを使用することができます、あなたは、単純なマップ・メソッドを使用する必要が

import React from 'react'; 

const EvolutionChainComponent = ({data}) => { 
    return Object.keys(data).map((key, index) => (
     <div key={index}> 
      <img src={data[key].sprites.front_default} role='presentation'/> 
     </div> 
    )); 
} 

export default EvolutionChainComponent;