React js map() undefined non è una funzione

Question

Sono nuovo di React e sto diventando un po 'pazzo cercando di capire cosa sto facendo male. Sto provando ad iterare attraverso un array JSON che ricevo da una chiamata Ajax. Quando mi giro il dati funziona perfettamente, ma quando faccio una chiamata AJAX per ottenere gli stessi dati esatti mi undefined is not a function (evaluating 'this.state.list.map()')

dà la matrice:

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

la funzione:

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> 
    ); 
    } 
}); 

Qualsiasi aiuto è molto apprezzato.

Answer 1

Cambia il tuo getInitialState(). Attualmente i tuoi dati sono oggetti letterali e gli oggetti letterali non supportano map(). Cambialo in un array.

Answer 2

Nel mio caso stavo cercando di usare array.map ma i miei dati in realtà è stato un oggetto piuttosto che serie in modo da utilizzare Object.keys(data) è il modo giusto per iterare su oggetti:

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

Read details here