React js map() undefined не является функцией

Question

Я новичок в React, и я немного схожу с ума, пытаясь понять, что я делаю неправильно. Я пытаюсь выполнить итерацию через json-массив, который я получаю от вызова ajax. Когда я издеваться данные, которые он отлично работает, но когда я делаю AJAX вызов, чтобы получить ту же самую информацию, что дает мне undefined is not a function (evaluating 'this.state.list.map()')

массив:

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

функция:

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

Любая помощь очень ценится.

Answer 1

Изменить getInitialState(). В настоящее время ваши данные являются объектным литералом, а литералы объектов не поддерживают map(). Измените его на массив.

Answer 2

В моем случае я пытался использовать array.map но мои данные на самом деле был объектом, а не массив так, используя Object.keys(data) правильный способ перебрать объекты:

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

Read details here