React js map() undefined không phải là chức năng

Question

Tôi mới sử dụng React và tôi sẽ hơi điên rồ cố gắng tìm ra những gì tôi đang làm sai. Tôi đang cố gắng để lặp qua một mảng json mà tôi nhận được từ một cuộc gọi ajax. Khi tôi thử các dữ liệu mà nó hoạt động hoàn hảo, nhưng khi tôi thực hiện cuộc gọi ajax để có được các dữ liệu chính xác cùng nó mang lại cho tôi undefined is not a function (evaluating 'this.state.list.map()')

mảng:

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

chức năng:

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

Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Thay đổi getInitialState() của bạn. Hiện tại dữ liệu của bạn là một đối tượng theo nghĩa đen và đối tượng literals không hỗ trợ map(). Thay đổi nó thành một mảng.

Answer 2

Trong trường hợp của tôi, tôi đã cố gắng sử dụng array.map nhưng dữ liệu của tôi thực sự là một đối tượng chứ không phải là mảng nên sử dụng Object.keys(data) là đúng cách để lặp qua các đối tượng:

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

Read details here