javascript - 在 javascript 的 map 中执行 map ？

Question

我有这个代码:

_renderChannels() {
     return this.state.channelsData.map(channelData => {
       return this.state.channelsStreamData.map(channelStreamData => {
          return <Channel channelData={channelData} channelStreamData={channelStreamData} />
      })
    });
  }

我想在 Channel 组件上映射 Prop ，但 Channel 组件被重复返回 9 次，而它应该只有 3 次？所以我想映射channelData和channelStreamData的数据，返回组件Channel。我尝试删除其中的 map ，但当我不归还它时它不会归还。帮忙？

Answer 1

应该这样做:

_renderChannels() {
    return this.state.channelsData.map((channelData, i) => <Channel 
        channelData={channelData}
        channelStreamData={this.state.channelStreamData[i]}
    />);
}

我添加了 i，索引参数。这样我就可以从 this.state.channelStreamData 数组中获取相同的元素。