我正在使用访存来获取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