Reactjs 反应如何嵌套.map函数

我正在开发一个基本的react应用程序，我使用Pokeapi获取一些数据。此数据将存储在状态中

我的意图是将每一代渲染为引导col-md-x，我应该为每一代使用一个函数，还是一次渲染所有代的函数

组件的代码段：

import React，{Component}来自'React'；
从“./Pokemon”导入口袋妖怪；
从“./Loader”导入加载程序；
从“../services/PokeService”导入*作为PokeService
导出默认类PokeOverview扩展组件{
建造师（道具）{
超级（道具）；
此.state={
世代：{
第一代：[]，
第二代：[]，
第三项：[]，
第四代：[]，
第五代：[]，
第六代：[]，
第七代：[]，
}
};
this.isLoading=true；
}
componentDidMount（）{
this.isLoading=false；
PokeService.getFirstGen（）.then（（响应）=>{
这是我的国家({
世代：{
…这个州，几代人，
第一代：反应。结果
}
});
}).catch（error=>console.log（error.message））
PokeService.getSecondGen（）.then（（响应）=>{
这是我的国家({
世代：{
…这个州，几代人，
第二代：响应。结果
}
});
}).catch（error=>console.log（error.message））
log（this.state.generations）；
}
renderFirstGen（）{
log（this.state.generations）；
返回此.state.generations.firstGen.map（（gen，i）=>{
返回
});
}
renderAllGens（）{
Object.keys（this.state.generations）.map（（generation）=>{
返回此.state.generations[generation].map（（口袋妖怪，i）=>(
))
});
}
render（）{
返回(
口袋妖怪列表：
{！this.isLoading？this.renderAllGens（）：（）}
)
}
}

此.state.pokemon是一个不可映射的对象。您可以使用函数
Object.keys（）
，该函数以数组形式检索对象中的所有键，并映射到该数组上

return Object.keys(this.state.generations).map((generation) => {
     return this.state.generations[generation].map((gen, i ) => (
        <Pokemon key={i} name={gen.name} />
     ))
 });

返回Object.keys（this.state.generations.map）（（generation）=>{
返回此.state.generations[generation].map（（gen，i）=>(
))
});


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
世代：{
第一代：['1'，'2']，
第二代：[‘三’、‘四’]
}
}
}
render（）{
返回(
{
Object.keys（this.state.generations）.map（gen=>{
返回此.state.generations[gen].map（名称=>(
{name}

));
})
}
);
}
}
render（，document.getElementById（“根”））

使用此代码时，我收到错误：TypeError:\u this3.state.pokemons[generation]。map不是函数。如果我想向状态添加更多异步数据，我不需要保留所有以前的状态吗？@Regentix抱歉。打字错误这是
this.state.generations
我已经更新了答案，但仍然收到错误：TypeError:\u this3.state.pokemons[generation]。地图不是function@Regentix就像我提到的那样，
this.state.generations
。请参阅更新的回答我正在使用您提供的代码。在我的情况下，为每一代生成一个函数会更好吗？将return添加到map语句中，因此setState必须是
firstGen:response.results
？您是对的，我会将您的答案标记为正确的。非常感谢！