Question

我正在构建一个应用程序的侧边栏，它由较小的元素组成。现在，虽然每个子元素都包含一个唯一的键，但是侧栏子元素数组没有完全迭代的问题。我觉得它可能与钥匙有关。：/

补充工具栏元素：

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有关。

地图功能不会迭代所有孩子

1 个答案: