Javascript 映射在React中未定义

我使用fetch获取API数据，我使用这些数据创建一个下拉列表，我还将添加路由。我以前做过几次，但我以前使用过axios，但我只是想熟悉fetch。有人能看出为什么地图是未定义的问题吗

import React, { Component } from 'react'

class Fetchheroes extends Component {
    constructor() {
        super();
        this.state = {
            heroes:  [],
        }
    }

    componentDidMount(){
        fetch('https://api.opendota.com/api/heroStats')
            .then(results => {
                return results.json();
            }).then(data =>{
                let heroes = data.results.map((hero) =>{
                    return(
                        <div key={hero.results}>
                             <select>
                                 <option>{hero.heroes.localized_name}</option>
                             </select>
                        </div>
                    )

                })
            this.setState({heroes: heroes});
            console.log("state", this.state.heroes);
        })
    }
    render(){
        return(
            <div>
                <div>
                    {this.state.heroes}
                </div>
            </div>
        )
    }

}
export default Fetchheroes

import React，{Component}来自“React”
类扩展组件{
构造函数（）{
超级（）；
此.state={
英雄：[]，
}
}
componentDidMount（）{
取（'https://api.opendota.com/api/heroStats')
。然后（结果=>{
返回results.json（）；
})。然后（数据=>{
让英雄=data.results.map（（英雄）=>{
返回(
{英雄。英雄。本地化的名字}
)
})
this.setState（{英雄：英雄}）；
console.log（“state”，this.state.heros）；
})
}
render（）{
返回(
{这个州。英雄}
)
}
}
导出默认抓取

您的数据映射错误。您需要使用

数据

而不是

数据。结果

并且您的

键

值不正确，因为在这种情况下

结果

不是唯一键。你也不需要你的

英雄.英雄.本地化的名字

只要

英雄.本地化的名字

。我在codesandbox中做了一个例子

编辑

我举了另一个例子，当我将所有记录放在一个选择中，而不是多个选择中，可能这就是您或其他人需要的：）

---

我将使用调试器检查

数据返回的形状。我猜你是想做
data.map
而不是
data.results.map