React Wurf Fehler: Kann nicht lesen Eigenschaft 'Karte' von undefined

Question

Ich lerne React. Ich verfolge ein Kapitel in Buch, in dem sie die Daten von API unter componentDidMount laden und aktualisieren Sie den Status der Komponente als

getInitialState: function() { 
     return {changeSets: []}; 
    }, 
    mapOpenLibraryDataToChangeSet : function (data) { 
    return data.map(function (change, index) { 
     return { 
     "when":jQuery.timeago(change.timestamp), 
     "who": change.author.key, 
     "description": change.comment 
     } 
    }); 
    }, 
    componentDidMount: function() { 
     $.ajax({ 
      url: 'http://openlibrary.org/recentchanges.json?limit=10', 
      context: this, 
      dataType: 'json', 
      type: 'GET' 
     }).done(function (data) { 
//    console.log(data); 
      var changeSets = this.mapOpenLibraryDataToChangeSet(data); 
      console.log("changeSets:" + JSON.stringify(changeSets)); 
      this.setState({changeSets: changeSets}); 
     }); 
    }, 

Als ich das laufen, ich sehe Fehler auf der Konsole als

"TypeError: Cannot read property 'map' of undefined 
    at t.render (mikobuf.js:55:41) 
    at _renderValidatedComponentWithoutOwnerOrContext (https://npmcdn.com/react@15.3.1/dist/react.min.js:13:17508) 
    at _renderValidatedComponent (https://npmcdn.com/react@15.3.1/dist/react.min.js:13:17644) 
    at performInitialMount (https://npmcdn.com/react@15.3.1/dist/react.min.js:13:13421) 
    at mountComponent (https://npmcdn.com/react@15.3.1/dist/react.min.js:13:12467) 
    at Object.mountComponent (https://npmcdn.com/react@15.3.1/dist/react.min.js:15:2892) 
    at h.mountChildren (https://npmcdn.com/react@15.3.1/dist/react.min.js:14:26368) 
    at h._createInitialChildren (https://npmcdn.com/react@15.3.1/dist/react.min.js:13:26619) 
    at h.mountComponent (https://npmcdn.com/react@15.3.1/dist/react.min.js:13:24771) 
    at Object.mountComponent (https://npmcdn.com/react@15.3.1/dist/react.min.js:15:2892)" 

Die laufender Link ist http://jsbin.com/mikobuf/edit?js,console,output

Was mache ich falsch?

UPDATE

Als ich die changeSets={data} hinzugefügt, während die App-Rendering, ich sehe Daten in der Konsole

ReactDOM.render(<App headings = {headings} changeSets={data}/>, document.getElementById("container")) 

Aber ich möchte die Daten von API gezogen werden. Also, sobald ich die changeSets={data} entfernen beim Rendern, versagt es

ReactDOM.render(<App headings = {headings}/>, document.getElementById("container")) 

Answer 1

Sie versuchen, die Requisiten changeSets zu verwenden, wenn es tatsächlich Teil App s Zustand ist. Diese

:

<RecentChangesTable.Rows changeSets={this.props.changeSets} />

sollte sein:

<RecentChangesTable.Rows changeSets={this.state.changeSets} />

http://jsbin.com/tuqeciyere/1/edit?js,console,output