我是 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()
映射第二个数组?
我是否必须使用嵌套数组创建另一个对象?
解决这个问题的最佳方法是什么?
最佳答案
一种方法是使用传递给 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>)
})
}
</>)
}
关于javascript - React - 使用多个数组进行映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57881446/