Question

我在我的反应应用程序中发出GET请求，返回团队数据。我在父组件中创建它，然后将其传递给子Loop组件。 GET请求正在运行但是当它到达render函数时未定义，可能是因为我的GET请求尚未完成。我曾尝试使用componentWillMount，但我遇到了同样的问题。

有没有人可以看到明显我做错的事情？我对React很新。

请参阅下面的代码。

var App = React.createClass({

    getInitialState: function() {
       return {
           teams: []
       }
    },

    componentDidMount: function() {
       $.get(url, function(data) {
           this.state.teams.push(data)
        });
    },

    render: function() {
       console.log(this.state.teams)
          return ( 
             < div >
               < Loop teams={this.state.teams} / >
             < /div>
          )
     }
});

var Loop = React.createClass({
    render: function() {
        var teamList = this.props.teams.map(function(team, index){
            return(
                <h1 key={index}>
                    {team.name}
                </h1 >
             )
        }) return <ul > {teamList} < /ul>
    }
})

Answer 1

您走在正确的轨道上：您获得undefined的原因是因为请求尚未完成。

这是因为您的代码使用this.state直接更改状态。但是您的请求是异步的，因此您需要使用setState，仅在请求完成时更新状态：

componentDidMount: function() {
   $.get(url, function(data) {
       this.setState({
         teams: data,
       })
    }.bind(this));
}

请参阅the docs。

使用来自GET请求的数据进行反应并在子组件中使用

1 个答案: