使用多个数组的反应映射

Question

我是个新手，如果这太基本了，很抱歉。

我有一个数组：

const previews  = this.state.previews;

结构如下：

previews: [
"https://p.scdn.co/mp3-preview/86319eaef2091a7f89e53f133ad8d76025e50c4b?cid=d3b2f7a12362468daa393cf457185973",
"https://p.scdn.co/mp3-preview/e5a194941e4268f3861439567b1b5700b6060732?cid=d3b2f7a12362468daa393cf457185973",
]

我映射它，以便呈现它的每个值，如下所示：

return (
   <div id="parent">
    {previews.map((preview, index) =>
      <span key={index}>
        <Media>
          <div className="media">
            <div className="media-player">
              <Player src={preview} />
            </div>
            <div className="media-controls">
              <PlayPause />
              <CurrentTime />
              <Progress />
              <Duration />
              <MuteUnmute />
            </div>
          </div>
        </Media>
      </span>)
    }
  </div>
);

上面的方法是可行的。但是假设我有另一个数组(每个预览对应的艺术家)：

const artists  = this.state.artists;

结构如下：

artists: [
"The Milk Carton Kids",
"Yo La Tengo",
]

我希望在映射中包含此数组，以便也呈现每个艺术家，如下所示：

return (
      (...)

      <td class="number">{ artist }</td>

      (...)
);

如何在上面的代码中使用map()映射第二个数组？

我必须创建另一个嵌套数组的对象吗？

做这件事最好的方法是什么？

Answer 1

一种方法是使用传递给map回调的第二个index参数来访问previews数组中对应于当前映射的artist项的项，如下所示：

render() {
    const { artists, previews } = this.state;

    return (<>
    { 
      artists.map((artist, index) => {
        /* 
        Obtain preview from state.previews for current artist index 
        */
        const preview = previews[index];

        /* 
        Render current artist data, and corresponding preview data
        for the current artist 
        */
        return (<span key={index}> 
                  <span class="number">{ artist }</span>
                  <Media>
                    <div className="media">
                      <div className="media-player">
                        <Player src={preview} />
                      </div>
                      <div className="media-controls">
                        <PlayPause />
                        <CurrentTime />
                        <Progress />
                        <Duration />
                        <MuteUnmute />
                      </div>
                    </div>
                  </Media>
                </span>)
       })
     }
     </>)   
}