反应音乐播放器显示歌曲

Question

所以我需要一些帮助，这是我第一次构建这样的东西，但是我需要为我的项目提供帮助的是老师。将代码添加到“专辑”组件中，以在<tbody>元素内呈现歌曲列表。就像“库”组件中的专辑列表一样，您需要使用.map()方法来遍历this.state.album.songs数组中的每首歌曲。 .map()的回调函数应返回一个<tr>元素。

代码是我的album.js

import React, { Component } from 'react';
import albumData from './../data/albums';

class Album extends Component {
  constructor(props) {
    super(props);

    const album = albumData.find( album => {
      return album.slug === this.props.match.params.slug
    });

    this.state = {
      album: album
    };
  }
  render() {
  return(
    <section className="album">
  <section id="album-info">
    <img id="album-cover-art" src={this.state.album.albumCover} alt={this.state.album.title}/>
    <div className="album-details">
    <h1 id="album-title">{this.state.album.title}</h1>
    <h2 className="artist">{this.state.album.artist}</h2>
    <div id="release-info">{this.state.album.releaseInfo}</div>
      </div>
      </section>
      <table id="song-list">
       <colgroup>
        <col id="song-number-column" />
        <col id="song-title-column" />
        <col id="song-duration-column" />
        </colgroup>
        <tbody>

        </tbody>
        </table>
     </section>

  );
  }
}

export default Album;

这是我的Library.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import albumData from './../data/albums';

class Library extends Component {
  constructor(props) {
    super(props);
    this.state = { albums: albumData };
  }

  render() {
    return (
      <section className='library'>
      {
        this.state.albums.map( (album, index) =>
      <Link to={`/album/${album.slug}`} key={index}>
        <img src={album.albumCover} alt={album.title} />
        <div>{album.title}</div>
        <div>{album.artist}</div>
        <div>{album.songs.length} songs</div>
        </Link>
    )
      }
      </section>
    );
  }
}
export default Library;