无法使用 REACTJS 读取未定义的属性“地图”

Question

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

但是我得到了以下错误

我在这里做错了什么？它应该可以工作。

Answer 1

首先，你不应该在构造函数中调用 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>
        );
    }
}