Question

使用.map进行渲染时遇到了一些困难。我要做的是渲染艺术家姓名，歌曲标题以及指向可以找到乐谱的页面的链接。我对这些类别中的每一个都有一个单独的状态，它看起来像这样：

<table>
  <thead> 
      <th>head...</th>
  </thead>
  <tbody >
    <tr>
      <td>test...</td>
    </tr>
  </tbody>
</table>

这是我的渲染：

this.state = {
        currentSearch: "",
        artistName: [],
        songTitle: [],
        tabId: [],
    }

我遇到的主要问题是信息会在页面上显示如下：

render(){
    return(
        <div>
            {this.props.artist.map((artist, i) =>{
                return(
                    <h3>{artist}</h3>
                )
            })}

            {this.props.title.map((title, i) => {
                return (
                    <h3>{title}</h3>
                )
            })}

            {this.props.link.map((link, i) => {
                return (
                    <h3>{link}</h3>
                )
            })}
        </div>
    )
}

有没有办法可以映射这些，以便它们像这样一个接一个地出现？

The Beatles
The Beatles
The Beatles
All You Need Is Love
Blackbird
Twist and Shout
www.allyouneedisloveurl.com
www.blackbirdurl.com
www.twistandshouturl.com

谢谢！

Answer 1

您可以使用索引来呈现其他数据。尝试

render(){
    return(
        <div>
            {this.props.artist.map((artist, i) =>{
                return(
                    <div key={i}>
                       <h3>{artist}</h3>
                       <h3>{this.props.title[i]}</h3>
                       <h3>{this.props.link[i]}</h3>
                    </div>
                )
            })}
        </div>
    )
}

Answer 2

您可以将它们放在一个地图中，如下所示：

render(){
  return(
    <div>
      {
       this.props.artist.map((artist, i) =>{
         return( 
           <div key={i} className="artist">
             <h3>{artist}</h3>
             <h3>{this.props.title[i]}</h3>
             <h3>{this.props.link[i]}</h3>
           </div>
         )
        })
      }
    </div>
  )
}

使用.map一个接一个地渲染多个状态

2 个答案: