ReactJS Ruft Call Returns Gesamtes Array, aber nicht einzelner Index

Question

Derzeit kann ich den gesamten $ .get-Aufruf zurückgeben, aber wenn ich versuche, den ersten Index zurückzugeben, scheint es nicht zu funktionieren. Jeder Einblick würde geschätzt werden. Ich werde im Wesentlichen den Inhalt des Arrays auf der Straße rendern, aber momentan scheint es keinen einzigen Index zu bekommen, der angezeigt wird, während das gesamte Array von Objekten vom get-Aufruf übernommen wird. Sie können sehen, der gesamte Aufruf in der TableSet-Komponente funktioniert einwandfrei. Sie können den Code auch hier sehen: http://codepen.io/PizzaPokerGuy/pen/dXgNvQ?editors=0011

var TableSet = React.createClass({ 
    getInitialState: function() { 
        return { 
         data: [] 
        }; 
       }, 

       componentDidMount: function() { 
        $.get("https://fcctop100.herokuapp.com/api/fccusers/top/recent", function(data) { 
         var userInfo = data; 
         if (this.isMounted()) { 
          this.setState({ 
           lastGistUrl: userInfo 
          }); 
         } 
        }.bind(this)); 
       }, 

    render: function(){ 

    return(<div className="container"> 
    <table className="table table-striped table-bordered"> 
     <thead> 
     <tr> 
     <th>#</th> 
     <th>Camper Name </th> 
     <th>Points in Past 30 Days</th> 
     <th>All Time Points</th> 
     </tr> 
     </thead> 
     <tr><td>1</td><td>{this.state.lastGistUrl}</td></tr> 
     </table> 
     </div> 
); 

} 
}); 

var FooterBar= React.createClass({ 
    render: function(){ 
    return (<div id= "footerBar" className ="container text-center"><strong><h4><a href = 'https://www.YouTube.com/CodingTutorials360'>Check out my YouTube Channel: <br/>CodingTutorials360</a></h4></strong></div>); 
    } 
}); 

var LeaderBar = React.createClass({ 
    render: function(){ 
    return (<div id='leaderBar' className='container text-center'> 
      <h1>Leaderboard</h1> 

      </div>); 
    } 
}); 
var HeaderBar = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <div id='headerBar' className = 'container-fluid'><img src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'/></div> 
     <LeaderBar /> 
     <TableSet /> 
     <FooterBar /> 
     </div> 
    ); 
    } 
}); 

React.render(
    <HeaderBar />, 
    document.getElementById('mount-point')); 

Answer 1

var TableSet = React.createClass({ 

    getInitialState: function() { 
    return { 
    lastGistUrl: [] 
    }; 
    }, 

    componentDidMount: function() { 
    $.get("https://fcctop100.herokuapp.com/api/fccusers/top/recent", function(data) {   
     if (this.isMounted() && Array.isArray(data)) { 
      this.setState({ 
       lastGistUrl: data 
      }); 
     } 
    }.bind(this)); 
    }, 

    renderGist: function() { 
    if (!this.state.lastGistUrl) { 
     return null 
    } 
    var items = this.state.lastGistUrl.map(function(gist) { 
    return (
     <td>{gist.username}</td> 
    ) 
    }) 

    return (
     <tr> 
     {items} 
     </tr> 
    ) 
    }, 

    render: function() { 
    return(
     <div className="container"> 
     <table className="table table-striped table-bordered"> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Camper Name </th> 
      <th>Points in Past 30 Days</th> 
      <th>All Time Points</th> 
     </tr> 
     </thead> 
     {this.renderGist()} 
     </table> 
    </div> 
    ); 
    } 
}); 

Answer 2

lastGistUrl zu einem Objekt festgelegt ist, nicht ein Array. Wenn Sie auf eine Eigenschaft des Objekts zugreifen möchten, verwenden Sie lastGistUrl.propName, ändern Sie andernfalls die getInitialState-Funktion, um React mitzuteilen, dass er eher ein Array als ein Objekt erwartet.