JSON配列データをreactjsに表示

Question

私は愚かな間違いを犯している可能性がありますが、このREST API出力はReactを通じてUIで消費していますが、部分的に出力が得られます。私はログコンソール場合、私はのための出力を取得 - ;（testRowsはAJAXのデータであるthis.setState（{testRowsデータを}））：

this.state.testRows.Type as 'Application Performance'  

私はthis.state.testRows.Names [0を行うと]最初の値、すなわちdesc2を出力するには、エラーが出ます。反応するJSONの配列値を表示または印刷する正しい方法は何ですか？

{ 

"Names": [ 
"desc2", 
"desc3" 
], 
"Result": 0, 
"Type": "Application Performance", 
"dateTime": [ 
"2016-07-26 20:35:55", 
"2016-07-26 20:35:55" 
] 

} 

ReactJS：

var App = React.createClass({ 

    getInitialState: function() { 
     return { 

      testRows: [] 

     }; 
    }, 

    componentWillMount: function (event) { 

     $.ajax({ 
      type: "GET", 
      crossDomain: true, 
      url: /details/3, 
      success: function(data) { 
       this.setState({testRows: data}); 
      }.bind(this), 
      error:function(data) { 
       alert("Data sending failed"); 
      } 
     }); 
    }, 

    render: function() { 

     console.log(this.state.testRows.Type); ~~ I get the output 
     console.log(this.state.testRows.Names[0]); ~~ Error 

     return (

     ); 
    } 
}); 

var element = document.getElementById('content'); 
ReactDOM.render(React.createElement(App), element); 

Answer 1

あなたのrenderメソッドからNamesをログコンソールしようとしています。 コンポーネントがマウントされた直後にレンダリングメソッドが呼び出されます。つまり、その時間までにajaxが完了せず、状態にNamesがなく、したがって、undefinedにアクセスしようとするとエラーがスローされます。

あなたのajaxが完了して状態が設定された後、renderが再び呼び出されたときにif句が満たされ、コードがnamesとして利用可能になりました。