javascript - 在React中未定义Map

我正在使用访存来获取API数据，这些数据将用于创建下拉菜单，我也将添加路由。我之前已经做过几次，但是以前使用过axios，但我也想熟悉提取。谁能看到为什么地图未定义的问题？

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

最佳答案

您对数据的映射不正确。您需要使用data而不是data.result，并且key值不正确，因为在这种情况下results不是唯一键。您也不需要仅hero.heroes.localized_name。我在codesandbox中做了一个例子。

https://codesandbox.io/s/clever-hodgkin-7qo6p

编辑

当我将所有记录放到一个选择中而不是选择多个时，我做了另一个例子，也许就是您需要的东西或其他人:)。

https://codesandbox.io/s/bold-grass-gv0wc