webentwicklung-frage-antwort-db.com.de

Die zurückgegebene Reakt-Komponente kann die Eigenschaft '__reactInternalInstance $ von null nicht lesen, nachdem versucht wurde, auf das Array zuzugreifen

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 versuche, {theList} zurückzugeben, erhalte ich eine Kann die Eigenschaft '__reactInternalInstance $ mincana79xce0t6kk1s5g66r' von null error nicht lesen. Wenn ich jedoch {theList} durch statische HTML-Datei ersetze, druckt console.log das korrekte Array von Objekten, die ich möchte. Bei den Antworten habe ich versucht, sowohl {theList} als auch theList zurückzugeben, aber das hat nicht geholfen.

In beiden Fällen druckt console.log zuerst [] aus. Ich gehe davon aus, dass componentDidMount meinen ajax-Aufruf enthält, um json vom Server abzurufen, und wurde vor dem ersten render () noch nicht ausgelöst. Ich habe versucht zu prüfen, ob This.props.data null ist, aber es hilft nicht.

Ist hier 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>
    );
  }
}); 
8

Ah OK, es gab einige interessante Probleme hier, aber Sie waren so nah . Das große Element, mit dem Sie reagieren müssen, muss immer ein einzelnes Element der obersten Ebene (z. B. ein Div) zurückgeben. Ihre Variable theList war also eigentlich ein Array von divs. Das kannst du nicht direkt zurückgeben. Sie können es aber zurückgeben, wenn es in einem einzigen übergeordneten div gespeichert ist.

const mockData = [
	{
  	username: 'bob',
    recent: 'seven',
    alltime: 123,
  },
	{
  	username: 'sally mae',
    recent: 'seven',
    alltime: 133999,
  },
];

var $ = {
	ajax(opt) {
  	setTimeout(() => {
    	opt.success(mockData);
    }, 200);
  }
}

const UserList = React.createClass({
  render: function(){
  	let theList;
    if (this.props.data && this.props.data.length) {
      theList = this.props.data.map(function(user, pos){
        return (
          <div key={user.username} className="row user">
            <div className="col">{pos}</div>
            <div className="col">{user.username}</div>
            <div className="col">{user.recent}</div>
            <div className="col">{user.alltime}</div>
          </div>
        );
      });
    } else {
      theList = <div>There is NO data</div>;
    }
    
    return <div>{theList}</div>;
  }
});

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">
        <UserList data={this.state.data}/>
      </div>
    );
  }
}); 

ReactDOM.render(
  <Leaderboard/>,
  document.getElementById('container')
);
.col {
  width: 200px;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Um die Geige etwas zu erklären. Machen Sie sich keine Sorgen über das seltsam aussehende var $-Zeug, ich störe nur die Ajax-Methode von jQuery aus, damit ich nach 200ms einige falsche Daten zurückgeben kann.

Für mich gibt mir jsfiddle eine 'bad config'-Nachricht, wenn ich es ausführe, aber ich schließe die Nachricht und das Ergebnis ist da. Ich weiß nicht worum es geht.

8
return (
  {theList}
)

sollte einfach sein

return theList

weil Sie zu diesem Zeitpunkt nicht in JSX sind. Was Sie dort tun, wird als interpretiert

return {
  theList: theList
}

Das ist die ES6-Abkürzungseigenschaften-Syntax.

4
Jeff

Fehler können auch beim Zugriff auf verschachtelte Zustände auftreten, die nicht vorhanden sind:

Ich habe nicht den Ruf, einen Kommentar abzugeben, also füge ich eine Antwort für zukünftige Unterstützung hinzu - ich bin aus einem anderen Grund auf dieselbe Frage gestoßen. Anscheinend wird der Fehler durch einen früheren Fehler ausgelöst, der den internen Status von react abbricht, aber der Fehler wird irgendwie aufgefangen. github Ausgabe # 8091

In meinem Fall habe ich versucht, auf eine Staatseigenschaft zuzugreifen, die nach dem Umzug in den redux-Store nicht vorhanden war:

// original state
state: {
  files: [],
  user: {},
}
// ... within render function:
<h1> Welcome {this.state.user.username} </h1>

Anschließend habe ich den Benutzer in den redux-Store verschoben und die Zeile aus dem Status .__ gelöscht. // modifizierter Zustand Zustand: { Dateien: [], } // ... innerhalb der Renderfunktion (vergessen zu ändern):

<h1> Welcome {this.state.user.username} </h1>

Und dies warf den kryptischen Fehler. Alles wurde durch das Ändern von render für den Aufruf von this.props.user.username aufgeräumt. 

1
Reid Henderson

Ich bin auf diesen Fehler gestoßen, als ich eine zustandslose Komponente gerendert habe und beschlossen habe, das reag-Wurzelelement (wrapping div) zu entfernen, nachdem es mit der grundlegenden Dom-Bearbeitung gerendert wurde.

Fazit: sei dir dessen bewusst, mach es besser nicht.

0
ant45de

Es gibt ein kleines Problem mit der if-Anweisung:

if(this.props.data !== []){

sollte sein:

if(this.props.data){

this.props.data ist null, wenn der ajax-Aufruf null zurückgibt. alternativ könnte der Code aufwendiger sein.

const data = this.props.data;
if(data && data.constructor === Array && data.length > 0) {
0
vijayst

Nicht sicher, ob Sie es so machen möchten, aber es funktioniert für mich.

edit:

const UserList = React.createClass({
  render: function() {
    if(this.props.data){
      return this.props.data.map(function(user, pos){
        return (
          <li> className="row user">
            <span>{pos}</span>
            <span>{user.username}</span>
            <span>{user.recent}</span>
            <span>{user.alltime}</span>
          </li>
        );
      });
    } else {
      return <li>I don't know anymore</li>;
    }
  }
});
0
alexi2