Reagieren Komponente Rückkehr nicht Lesen kann Eigenschaft '__reactInternalInstance$ null nach dem Versuch, Zugriff auf array

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

Immer wenn ich Versuch zu return {theList}, erhalte ich eine Cannot read property '__reactInternalInstance$mincana79xce0t6kk1s5g66r' null Fehler. Wenn ich allerdings ersetzen Sie {theList} mit statischen html-Konsole.log druckt das richtige array von Objekten, die ich will. Nach den Antworten, die ich versucht habe zurück zu kehren beide {theList} und theList aber das hat nicht geholfen.

In beiden Fällen Konsole.log ersten Drucke aus [], was ich davon ausgehen ist, weil componentDidMount enthält mein ajax-Aufruf zum abrufen von json vom server und wurde nicht gefeuert noch vor dem ersten render(). Ich habe versucht, zu überprüfen, gegen
diese.Requisiten.Daten, die null 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>
    );
  }
}); 
Diese if (this.props.data !== []) wird immer wahr sein. Vielleicht möchten Sie versuchen if (Array.isArray(this.props.data)) {... oder einfach if (this.props.data) { ...
yup versucht, sowie vijay Vorschläge

InformationsquelleAutor astringentpattern | 2016-07-29

Schreibe einen Kommentar