Использование React для вызова Nested API?

Question

Скажите, что я имел следующий JSON файл:

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

Я хотел бы знать, как совершать звонки на них с помощью React. Моя лучшая попытка, как показано ниже.

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} будет работать, как это было написано. Однако я не уверен, как выразить последние два {this.state.activities.hobbies} и {this.state.farmer[0].crops} с использованием синтаксиса React.

Я написал их, надеюсь, способом, который выражает то, что я пытаюсь достичь с каждым звонком.

EDIT: Специфическая ошибка, которая возникает из последних двух, указывает, что они не определены.

EDIT: Итак, у меня есть второй, который добавляет пустое начальное состояние.

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

Однако это оставляет последний, который все еще возвращает ошибку.

Answer 1

Проблема в том, что вы используете componentDidMount, когда вы должны использовать componentWillMount. Ознакомьтесь с the documentation по этим методам жизненного цикла.

Это то, что документация говорит о componentDidMount

Вызывается один раз, только на клиенте (не на сервере), сразу же после того, как происходит начальный рендеринг.

Это означает, что при первом визуализации ваши состояния не объявляются, если вы раньше не использовали getInitialState (еще один метод жизненного цикла).

Я просто сделал это:

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

, и я был в состоянии использовать this.state.farmer[0].crops в моем методе визуализации

EDIT:

быть ясным. Если вам необходимо получить данные после визуализации компонента, вам необходимо указать значения по умолчанию для состояний, которые вы используете в рендеринге. Это может быть достигнуто с помощью getInitialState:

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