Question

所以，我知道在React中创建数据列表时，通常使用map函数。但是，既然这只适用于数组，而且我有一个对象，我不知道该怎么做。

所以，我有以下对象

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

我正在尝试从每个对象中包含的url渲染图像，这就是我尝试这样做的方式。

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数据迭代与数组上的map函数一起使用。

Answer 1

您可以使用Object.keys映射键并返回元素数组而不只是1个元素：

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;

Answer 2

无需迭代对象，您需要使用简单的map方法遍历对象数组

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;

使用对象

2 个答案: