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