ReactJS Get Call Возвращает весь массив, но не один индекс

Question

В настоящее время я могу вернуть весь вызов $ .get, но когда я пытаюсь вернуть первый индекс, он, похоже, не работает. Любое понимание было бы оценено. Я по существу собираюсь отображать содержимое массива по дороге, но в настоящее время не может показаться, что для отображения всего одного индекса используется весь массив объектов из вызова get. Вы можете видеть, что весь вызов в компоненте TableSet работает нормально. Вы можете увидеть здесь код, а также: 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 устанавливается на объект, а не массив. Если вы хотите получить доступ к объекту объекта, используйте lastGistUrl.propName, в противном случае измените функцию getInitialState, чтобы сообщить React, что ожидать массив, а не объект.