Reagieren: Objekteigenschaften hinzugefügt in LoadDataFrom Server sind nicht definiert in Komponente

Question

Ich bin neu in Reagieren und habe ein Problem, das ich nicht verstehe. Meine Daten sind ein Array von Objekten mit Eigenschaften von "Skizzen" (Name, Anzahl von "Links", Anzahl von "Knoten" und anderen Dingen) aus einer JSON-Datei. Ich lade die Daten und sende einen Teil davon an eine Listenkomponente, die ich nach der Anzahl der Links und Knoten filtern kann. All das funktioniert gut. Mein Problem ist, dass ich eine ID-Nummer hinzufügen möchte, die ich an die gefilterte Liste sende (um einen Klick zurückzugeben). Hier ist der LoadDataFrom Server Teil meines Code:

const MyApp = React.createClass({ 
    loadDataFromServer: function() { 
    $.ajax({      
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({data: data}); 
     const sketz = []; 
     for (let i=0; i<data.length; i++) { 
      const sid = i; 
      sketz[i] = {sid: sid, 
      name: data[i].name, 
      numberOflinks: data[i].numberOflinks, 
      numberOfnodes: data[i].numberOfnodes 
     }; 
     } 
     this.setState({ 
      sketches: sketz 
     }) 
     }.bind(this), 
    error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, ..... 

Das Problem ist, dass, während jeder Eigenschaftswert von Daten auf die OK-Liste Komponente bekommt, alles, was ich versuche, hinzuzufügen, wie „sid“, aber jeder andere Eigenschaften und Werte, die nicht aus Daten stammen, werden in der Listenkomponente als undefiniert angezeigt. Ich habe Skizzen in LoadDataFromServer überprüft und die zugewiesenen IDs sind dort, aber sie sind in der Liste verschwunden. Ich verstehe wirklich nicht, warum sich das Objekt-Array der Skizzen so verhält und möchte (1) verstehen, warum, und (2) wissen, wie dies richtig funktioniert. Vielen Dank!

Hinzugefügt auf Anfrage: die Liste Komponente (eigentlich zwei Komponenten). Es folgt der Code, der in den React-Dokumenten unter der Überschrift "In React denken" verwendet wird, wo es sich um eine Tabelle und nicht um eine ungeordnete Liste handelt. Das erste console.log (für die ID) gibt undefined; der zweite gibt den richtigen Namen für jeden Durchlauf durch forEach.

const SketchList = React.createClass({ 
    render: function() { 
    const rows = []; 
    const lf = this.props.numlnk; // "link filter" 
    const nf = this.props.numnde; // "node filter" 
    this.props.sketches.forEach(function(sketch) { 
     console.log('in sketch, ID is ' + sketch.sid); 
     console.log('in sketch, name is ' + sketch.name); 
     if(lf == 0 || lf == sketch.numberOflinks) { 
     if (nf == 0 || nf == sketch.numberOfnodes) { 
      rows.push(<SketchRow 
      sketch={sketch} 
      key={sketch.name} 
      />); 
     } 
     } 
    }); 
    return (
     <div className="row voffset3 divcolor"> 
     <ul className="nobull mar-left list-scroll"> 
      {rows} 
     </ul> 
     </div> 
    ); 
    } 
}); 

const SketchRow = React.createClass({ 
    render: function() { 
    return (
     <li > 
     { 
      this.props.sketch.name 
     } 
     </li> 
    ); 
    } 
}); 

Answer 1

Danke Isiah. Bedienerfehler. Ich habe Skizzen auf Daten im Render zurückgesetzt, die von einer früheren Version übrig geblieben sind, wo ich nur die gefilterte Liste ausgearbeitet habe.