我是reactjs新手。
这就是我正在尝试的
class EventDemo extends Component {
constructor(){
super()
this.getStarWars()
this.state = {}
}
getStarWars = ()=> axios.get('https://swapi.co/api/people')
.then(res => {
console.log(res.data)
this.setState({
names: res.data.results
})
})
render() {
console.log(this.state.names);
return (
<div>
{this.state.names.map(function(e){
return <li>{e.name}</li>
})}
</div>
);
}
}
但是我收到以下错误
我在这里做错了什么?它应该可以工作。
最佳答案
首先,你不应该在构造函数中调用 this.getStarWars() 函数,这是一个非常糟糕的做法,可能会给你带来麻烦,React 组件中的 http 调用通常应该从 componentDidMount 函数中调用。
但是,这种情况下的问题是另一个问题,您没有为 this.state.names 提供初始值,因此当组件尝试进行初始渲染时,它会失败,因为自初始渲染开始以来名称未定义在http调用解决之前
您的代码应该像这样修复:
class EventDemo extends Component {
constructor(){
super()
this.state = { names:[] }
}
componentDidMount(){
this.getStarWars()
}
getStarWars = ()=> axios.get('https://swapi.co/api/people')
.then(res => {
console.log(res.data)
this.setState({
names: res.data.results
})
})
render() {
console.log(this.state.names);
return (
<div>
{this.state.names.map(function(e){
return <li>{e.name}</li>
})}
</div>
);
}
}
关于reactjs - 无法使用 REACTJS 读取未定义的属性 'map',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49543558/