El componente Reaccionar devuelto no puede leer la propiedad '__reactInternalInstance $ de null después de intentar acceder a la matriz

Aquí está el componente problemático en cuestión.

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
    );
  }
});

Cada vez que intento devolver {theList}, recibo unNo se puede leer la propiedad '__reactInternalInstance $ mincana79xce0t6kk1s5g66r' de null error. Sin embargo, si reemplazo {theList} con html estático, console.log imprime la matriz correcta de objetos que quiero. Según las respuestas, he intentado devolver tanto {theList} como theList pero eso no ayudó.

En ambos casos, console.log primero imprime [], lo cual supongo que es porque componentDidMount contiene mi llamada ajax para obtener json del servidor y aún no se ha disparado antes del primer render (). He intentado verificar que this.props.data sea nulo, pero no ayuda.

Aquí está el componente principal si ayuda:

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>
    );
  }
}); 

Respuestas a la pregunta(6)

Su respuesta a la pregunta