사용하여 데이터에 반응 내에서 하위 구성 요소

Question

나는 GET 요청을 만드는 중이라서에서 사용하는 팀 데이터를 반환 응용 프로그램을 반응한다. 부모 구성 요소에서 이것을 만든 다음 하위 구성 요소 Loop 구성 요소로 전달합니다. GET 요청이 작동하지만 GET 요청이 완료되지 않았기 때문에 render 기능에 도달하면 정의되지 않았습니다. 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을 사용하기 때문이다

.

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

이 the docs를 참조하십시오 업데이트 요청이 수행 된 경우에만 상태 setState를 사용해야하므로 그러나 귀하의 요청은 비동기입니다.