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>
);
}
});
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
sollte nur
weil Sie nicht in JSX an diesem Punkt. Was du machst, es wird interpretiert als
Ist das ES6 Kurzschrift-Eigenschaften syntax.
Es ist meist ein Anfängerfehler mit JSX. 🙂
bearbeitet Frage mit Ihren änderungen. erhält immer noch den gleichen Fehler obwohl. Ich ziehe meine Haare an dieser Stelle 🙁
machen Sie eine Konsole.melden Sie sich auf die Daten aus der ajax-Aufruf - wenn es
null
das war es dann.der ajax-Aufruf wieder ein array von Objekten als erwartet
InformationsquelleAutor Jeff
Fehler kann auch entstehen, den Zugriff auf geschachtelte Staat, der nicht existiert:
Fehlt mir der Ruf zu kommentieren, so dass das hinzufügen einer Antwort für die zukünftige Unterstützung -- ich lief in das gleiche Problem aus einem anderen Grund. Scheinbar, der Fehler wird ausgelöst, die aus einer früheren Fehler werfen Sie reagieren internen Zustand, aber der Fehler ist immer irgendwie erwischt. github issue #8091
In meinem Fall, ich habe versucht den Zugriff auf eine Eigenschaft des Staates, die nicht existieren, nach dem verschieben der Eigenschaft redux-Shop:
Ich nachträglich user zu redux-Shop und gelöschte Zeile von Staat
//modified-Zustand
Status: {
Dateien: [],
}
//... innerhalb der render-Funktion (vergessen zu ändern):
Und warf die kryptischen Fehler. Alles war geklärt, indem geändert wird, machen Sie zu rufen.Requisiten.Benutzer.Benutzername.
InformationsquelleAutor Reid Henderson
Gibt es ein kleines problem mit der if-Anweisung:
werden sollte:
diese.Requisiten.Daten null ist, wenn der ajax-Aufruf null zurück. alternativ kann der code könnte durchdachter sein.
Sie haben Recht, ich aktualisierte die Antwort. es sind die Daten.Konstruktor === Array.
InformationsquelleAutor vijayst
Nicht sicher, ob dies ist, wie Sie wollen, es zu tun, aber es funktioniert für mich.
edit:
Können Sie sich setzen, welche Konsole.log-returns...oder nur der Anfang und das Ende, wenn es sehr lang ist.
FYI, dies zu versuchen, um wieder ein Arrays von divs, die nicht einen gültigen return-Wert für
render()
Guter Fang, sorry, ich bin kopieren ein Muster, bei dem ich einen <li> danke, werde ich editieren Sie die Antwort.
InformationsquelleAutor alexi2
Dass ich auf diese Fehlermeldung, wenn ich machte eine stateless Komponente und beschlossen, zu entfernen, die reagieren-root-element (Verpackung div) nach dem Rendern es mit den grundlegenden dom-manipulation.
Fazit: sich dessen bewusst sein, besser tun Sie es nicht.
InformationsquelleAutor ant45de