javascript - 在 React 中使用对象创建 JSX 列表

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 in 循环，一旦返回 div，代码就会跳出循环。我确信有一种简单的方法可以通过迭代对象来实现此目的，但我不太确定那是什么，因为我只见过与数组上的映射函数一起使用的 React 数据迭代。

Answer 1

不需要遍历对象，需要使用简单的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;