2015-02-11 14 views
7

Ich bin neu zu Reagieren und ich werde ein wenig verrückt versuchen, herauszufinden, was ich falsch mache. Ich versuche, ein JSON-Array zu durchlaufen, das ich von einem Ajax-Aufruf erhalte. Wenn ich die Daten verspotten es funktioniert perfekt, aber wenn ich einen Ajax-Aufruf machen den exakt gleichen Daten, um es mir undefined is not a function (evaluating 'this.state.list.map()')Reagieren js map() undefined ist keine Funktion

das Array gibt:

[ { "name": "drop1" }, { "name": "drop2" }, { "name": "drop3" } ]

die Funktion:

var List = React.createClass({ 
    getInitialState: function() { 
    return {data: {}}; 
}, 
componentDidMount: function() { 
    $.ajax({ 
     url: ACTUAL_URL, 
     dataType: 'json', 
     success: function(data){ 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err){ 
     console.error(url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    render: function() { 
    return (
     <ul className="droplist"> 
     {this.state.data.map(function(l){ 
      return (<li>{l.name}</li>) 
     })} 
     </ul> 
    ); 
    } 
}); 

Jede Hilfe wird sehr geschätzt.

+0

Zusätzlich zur Verfügung gestellt Antwort: Normalerweise führen Sie keine Ajax-Anfragen von einer Komponente aus. – zerkms

+0

@zerkms Nicht einverstanden, normalerweise würden Sie, wenn Sie nicht Flux verwenden. –

+0

@limelights auch wenn Sie Flux nicht folgen - Sie müssen ein anderes architektonisches Designmuster verwenden, das Präsentation von Persistenz und Geschäftslogik trennt. – zerkms

Antwort

15

Ändern Sie Ihre getInitialState(). Derzeit sind Ihre Daten ein Objektliteral und Objektliterale unterstützt map() nicht. Ändern Sie es in ein Array.

+0

Wow ... das war eine einfache Lösung. Vielen Dank! –

2

In meinem Fall habe ich versucht array.map zu verwenden, aber meine Daten war eigentlich ein Objekt eher als Array so Object.keys(data) verwendet, ist der richtige Weg über Objekte iterieren:

Object.keys(data).forEach(item => {...}); 
// OR 
Object.keys(data).map(item => {...}); 

Read details here

Verwandte Themen