无法阅读财产' map'与REACTJS未定义

时间:2018-03-28 20:24:13

标签: reactjs

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

但是我得到以下错误

error

我在这里做错了什么?它应该有用。

1 个答案:

答案 0 :(得分:2)

首先,你不应该在构造函数中调用你的this.getStarWars()函数,这是一个非常糟糕的做法,可能会给你带来麻烦,React组件中的http调用一般应该从componentDidMount函数调用。 / p>

然而,在这种情况下的问题是另一个问题,你没有给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>
        );
    }
}