簡単な反応プログラム - なぜデータが表示されないのですか？

Question

皆さん。私は配列内のデータを持っており、私はそれが配列（配列から呼び出されたときにコンソール上に表示されます）まで伝えることができます。しかし、それは出力として表示されていません。私はこの時点で完全に失われています。コードは以下の通りで、私の作品はCodepen hereで見ることができます。誰かが私が間違っていることを指摘することができたら、私はそれを高く評価します。ここで

はHTML5です：ここでは

<div id="content" > 
</div> 

はreactjsです：

var CommentBox = React.createClass({ 
    render:function(){ 
    return(
     <div > 
    <h1>Here is the data</h1> 
    <AllData /> 
    </div> 
    ); 
    } 
}); 

var AllData = React.createClass({ 
    render: function(){ 
    var theList = []; 
     $.getJSON('https://fcctop100.herokuapp.com/api/fccusers/top/recent', 
     function(data) { 
     theList = data; 
     var steencamp 
      for(var i=0; i<10; i++){  
      steencamp = theList[i] 
      console.log(steencamp) 
      return (
       <div><p>{steencamp}</p></div> 
      ); 
     } 
    }) 
    }    
}); 

ReactDOM.render(
    <CommentBox />, 
    document.getElementById('content') 
); 

Answer 1

あなたのレンダリング機能でAJAXリクエストを行うべきではありません。レンダリングは、データのみを表示するために使用する必要があります。ここ

var AllData = React.createClass({ 
    dataUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent', 
    getInitialState: function() { 
     return {data: []} 
    }, 
    componentDidMount: function(){ 
     $.getJSON(this.dataUrl, this.handleData) 
    }, 
    handleData: function(data){ 
     this.setState({data: data}); 
    }, 
    render: function(){ 
     var elems = []; 
     for(var i=0; i<this.state.data.length; i++){ 
      elems.push(<div><p>{this.state.data[i]}</p></div>); 
     } 

     return <div>{elems}</div>; 
    } 
}); 

Answer 2

作業コードである：

var CommentBox = React.createClass({ 
    render:function(){ 
    return(
     <div > 
    <h1>Here is the data</h1> 
    <AllData /> 
    </div> 
    ); 
    } 
}); 

var AllData = React.createClass({ 

    dataUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent', 
    getInitialState: function() { 
     return {data: []} 
    }, 

    componentDidMount: function(){ 
     $.getJSON(this.dataUrl, this.handleData) 
    }, 
    handleData: function(data){ 
     this.setState({data: data}); 
    }, 
    render: function(){ 
     var elems = []; 
     for(var i=0; i<this.state.data.length; i++){ 
      elems.push(<div><p>{this.state.data[i].username}</p></div>); 
     } 
     return (<div>{elems}</div>); 
    } 

}); 

ReactDOM.render(
    <CommentBox />, 
    document.getElementById('content') 

）。