O componente React que retorna não pode ler a propriedade '__reactInternalInstance $ of null depois de tentar acessar a matriz
Aqui está o componente problemático em questão.
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
);
}
});
Sempre que tento retornar {theList}, recebo umaNão é possível ler a propriedade '__reactInternalInstance $ mincana79xce0t6kk1s5g66r' de null erro. No entanto, se eu substituir {theList} por html estático, o console.log imprime a matriz correta de objetos que eu quero. De acordo com as respostas, tentei retornar {theList} e theList, mas isso não ajudou.
Nos dois casos, o console.log imprime primeiro [], o que eu assumo é porque componentDidMount contém minha chamada ajax para obter o json do servidor e ainda não foi acionado antes da primeira renderização (). Tentei verificar se this.props.data é nulo, mas isso não ajuda.
Aqui está o componente pai, se ajudar:
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>
);
}
});