React js map（）undefined不是一個函數

Question

我是React的新手，我有點瘋狂試圖找出我做錯了什么。 我試圖迭代我從ajax調用得到的json數組。 當我模擬數據時，它工作得很好，但當我進行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 => {...});

在這里閱讀細節