ei der Rückgabe der @ React-Komponente kann die Eigenschaft '__reactInternalInstance $ of null' nicht gelesen werden, nachdem versucht wurde, auf das Array @ zuzugreife

Hier ist die problematische Komponente in Frage.

const UserList = React.createClass({
  render: function(){
    let theList;
    if(this.props.data){
      theList=this.props.data.map(function(user, pos){
        return (
          <div className="row user">
            <div className="col-xs-1">{pos}</div>
            <div className="col-xs-5">{user.username}</div>
            <div className="col-xs-3">{user.recent}</div>
            <div className="col-xs-3">{user.alltime}</div>
          </div>
        );
      }, this);
    } else {
     theList = <div>I don't know anymore</div>;
    }
    console.log(theList);
    return (
      theList
    );
  }
});

Wenn ich versuche, {theList} zurückzugeben, erhalte ich einKann die Eigenschaft '__reactInternalInstance $ mincana79xce0t6kk1s5g66r' von null @ nicht les Error. Wenn ich {theList} jedoch durch statisches HTML ersetze, gibt console.log das richtige Array der gewünschten Objekte aus. Gemäß den Antworten habe ich versucht, sowohl {theList} als auch theList zurückzugeben, aber das hat nicht geholfen.

In beiden Fällen gibt console.log zuerst [] aus, was vermutlich darauf zurückzuführen ist, dass componentDidMount meinen Ajax-Aufruf zum Abrufen von JSON vom Server enthält und noch nicht vor dem ersten Rendern () ausgelöst wurde. Ich habe versucht, zu überprüfen, ob this.props.data null ist, aber es hilft nicht.

Hier ist die übergeordnete Komponente, wenn es hilft:

const Leaderboard = React.createClass({
  getInitialState: function(){
    return ({data: [], mode: 0});
  },
  componentDidMount: function(){
    $.ajax({
      url: 'https://someurlthatreturnsjson',
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('https://someurlthatreturnsjson', status, err.toString());
      }.bind(this)
    });
  },
  render: function(){
    return (
      <div className="leaderboard">
        <div className="row titleBar">
          <img src="http://someimage.jpg"></img>Leaderboard
        </div> 
        <HeaderBar />
        <UserList data={this.state.data}/>
      </div>
    );
  }
});