React를 사용하여 중첩 된 API를 호출 하시겠습니까?

Question

나는 다음과 같은 JSON 파일을 가지고 말 :

I 반응 사용하여 전화를 걸하는 방법을 알고 싶습니다

{ 
"farmer": [ 
{ 
"crops": "corn" 
} 
], 
"activities":{ 
"hobbies": "swimming" 
}, 
"name: Todd" 
} 

. 최선의 시도는 아래와 같습니다.

componentDidMount: function(){ 
var selfish = this; 
$.get('~~someurl~~', function(data){ 
selfish.setState(data); 
}); 
}, 

render: function(){ 
return (<div> 
<p>{this.state.name}</p> 
<p>{this.state.activities.hobbies}</p> 
<p>{this.state.farmer[0].crops}</p> 
</div>) 
} 

나는 처음으로 {this.state.name}이 작성된대로 실행됩니다. 그러나 React 구문을 사용하여 마지막 두 {this.state.activities.hobbies}과 {this.state.farmer[0].crops}을 표현하는 방법에 대해서는 확실치 않습니다.

저는 전화를 걸 때마다 성취하고자하는 바를 표현한 방법으로 작성했습니다.

EDIT : 후자의 두 가지 결과로 나타나는 특정 오류는 정의되지 않았습니다.

EDIT : 그래서 빈 초기 상태를 추가하여 두 번째 작업을 얻었습니다.

getInitialState: function(){ 
return {activities: '', farmer: ''} 
} 

그러나 마지막으로 오류가 반환됩니다.

Answer 1

문제는 componentWillMount를 사용해야 할 때 componentDidMount를 사용하고 있다는 것입니다. 이 라이프 사이클 메소드에서 the documentation을 확인하십시오.

이 초기 렌더링이 발생한 후 문서 즉시 만 (가 아닌 서버) 클라이언트에 한 번 호출 componentDidMount

에 대한 말씀입니다.

즉, 이전에 getInitialState (다른 라이프 사이클 메소드)를 사용하지 않으면 상태가 선언되지 않습니다.

componentWillMount: function() { 
    this.setState({ 
     "farmer": [ 
      { 
      "crops": "corn" 
      } 
     ], 
     "activities":{ 
      "hobbies": "swimming" 
     }, 
     "name": "Todd" 
    }); 
}, 

그리고 내 렌더링 방법에

편집 this.state.farmer[0].crops을 사용할 수 있었다 :

단순히 이런 짓을

가 명확하기를. 구성 요소를 렌더링 한 후 데이터를 검색해야하는 경우 렌더링에 사용하는 상태의 기본값을 지정해야합니다. 이것은 getInitialState를 사용하여 얻을 수 있습니다 :

getInitialState: function() { 
    return { 
     "farmer": [ 
      { 
       "crops": DEFAULT_VALUE 
      } 
     ], 
     "activities":{ 
      "hobbies": DEFAULT_VALUE 
     }, 
     "name": DEFAULT_VALUE 
    }); 
},