javascript - React - 使用多个数组进行映射

Question

我是 React 的新手，抱歉，如果这太基础了。

我有一个数组:

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>)
       })
     }
     </>)   
}