Map 函数没有遍历所有 children

Question

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

侧边栏元素组件：

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"

Answer 1

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

Map 函数没有遍历所有 children

Map function doesn't iterate all children

javascript

reactjs