Javascript Map函数不会迭代所有子项

我正在为一个应用程序构建一个侧边栏，它由更小的元素组成。现在遇到一个问题，边栏子元素数组没有完全迭代，尽管每个子元素都由一个唯一的键组成。我有一种感觉，这可能与钥匙有关/

边栏元素组件：

---

问题是由我在将其发布到堆栈溢出时清理的代码引起的，这与在映射函数上下文中调用错误有关。

是否检查了播放列表的长度是否符合预期？是的，在我进行播放列表迭代和子元素创建之前，一切都很好，它只迭代第一个元素，但甚至不返回单个子元素。AppSidebar DOM为空：/I发现此wierd，因为在另一个项目中也做了相同的操作，但从未出现过类似的问题：/I尝试比较代码如果包装返回，是否看到任何错误；使用try{…}catch e{console.loge}？不，没有输出任何内容。您没有忘记AppSidebar的渲染函数中的{before playlists.map吗？

var AppSidebar = React.createClass({

  getInitialState: function() {
    return {
      children: []
    };
  },

  getPlaylists: function() {
    var that = this;

    // returns array of objects
    spotify.getMePlaylists(function(err, playlists) {
      if(err)
        console.error(err);

      that.setState({
        children: playlists
      });
    });

  },

  componentDidMount: function() {
    this.getPlaylists();
  },

  render: function() {

    // iterates all children
    this.state.children.map(function(playlist) {
      console.log(1, playlist.id, playlist.name);
    });

    var playlists = this.state.children;

    return (
      <div id="sidebar">
        playlists.map(function(playlist) {
          // only returns first playlist id and name
          console.log(2, playlist.id, playlist.name);
          return (<AppSidebarElement key={playlist.id} {...playlist} />);
        })}
      </div>
    );
  }
});

var AppSidebarElement = React.createClass({

  render: function() {
    return (
      <div className="playlist">
        {this.props.name}
      </div>
    );
  }
});

1 "75dwLdmL07hDEDWqX17QeE" "The Indie Mix"
1 "2wOXCZ6fJAjpekKlnbg49F" "Interesting artists"
1 "6ULfvJbsdzF7u14dBZo9w1" "chsshhh"
1 "4LJ5hkgqt04IKw454SUJqV" "Motivational Songs"
1 "75if3ukZz2tPS60IVMPhw6" "Best of the Suits Soundtrack"
...

2 "69H6RgTVs1jrv1IuuLe1a5" "Deep Dark Indie"