No se puede leer la propiedad 'map' de undefined con REACTJS - reactjs

Soy nuevo con reactjs.

Esto es lo que estoy tratando

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>
);
}
}

Pero este siguiente error que estoy recibiendo

¿Qué estoy haciendo mal aquí? Se supone que funciona.

Respuestas

En primer lugar, no deberías llamarlo así.La función getStarWars () dentro del constructor, es una práctica muy mala y podría causarle problemas, las llamadas http en el componente React generalmente se deben llamar desde la función componentDidMount.

Sin embargo, el problema en este caso es otro, ustedno ha dado un valor inicial a this.state.names, por lo que cuando el componente intenta hacer el renderizado inicial falla porque los nombres no están definidos ya que el render inicial aparece antes de que se resuelva la llamada http

Su código debe arreglarse así:

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>
);
}
}