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 => {...});

Read details here

React js map() undefined 不是一个函数

React js map() undefined is not a function

javascript

ajax

reactjs

react-jsx