Question

我正在尝试创建曲目列表。我想根据为指定ID单击的曲目名称来呈现曲目歌词。但是，这样做有些麻烦。

正在从MySQL获取数据。

这是我的代码：

型号：

var db = require("../dbconnection");

var music = {
  insertmusicTracks: function(data, callback) {
    db.query(
      "insert music_tracks set track_music_id=?, track_user_id=?, trackName=?, trackLyrics=?",
      [data.albumId, data.userId, data.songName, data.songLyrics],
      callback
    );
  },
  selectmusicTracks: function(data, callback) {
    db.query(
      "select mo.track_music_id, mo.trackName, mo.trackLyrics, mt.authorName, mt.trackTitle, mt.trackYear, mt.trackcoverImg from music_tracks mo left join music_topics mt on mt.music_id=mo.track_music_id where mo.track_music_id=?",
      [data.trackmusicId],
      callback
    );
  }
};

module.exports = music;

查看：

import React from "react";
import { Link } from "react-router-dom";

import { Modal, Button } from "react-bootstrap";

import Headericons from "../common/header-icons";
import Header from "../common/header";
import Footer from "../common/footer";
import Addtracklist from "../components/addmusictrack";
import dataTip from "data-tip";

import appController from "../../controllers/appController";

import musicService from "../../services/musicService";

class Musictracks extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: "",
      isAdmin: false,
      albumName: "",
      musicId: this.props.match.params.musicid,
      trackData: []
    };
  }

  handleClose = () => {
    this.setState({ show: false });
  };

  handleShow = () => {
    this.setState({ show: true });
  };

  selectTracks = async () => {
    const selectmusicTracks = await musicService.selectmusicTracks({
      trackmusicId: this.props.match.params.musicid
    });

    this.setState({
      trackData: selectmusicTracks
    });

    console.log(this.state);
  };

  showLyrics = async trackId => {
    this.setState({
      lyricId: trackId
    });
    console.log(this.state);
  };

  async componentDidMount() {
    if (appController.isAdmin().role_id === 3) {
      await this.setState({
        userId: appController.isAdmin().userID,
        isAdmin: true
      });
    }
    this.setState({
      albumName: this.props.match.params.title
    });

    await this.selectTracks();

    await this.showLyrics();
  }

  render() {
    return (
      <div className="fluid-container">
        <Headericons />
        <Header />
        <div className="container" id="musictrackContainer">
          <h1>{appController.removeHyphen(this.state.albumName)}</h1>
          <div className="row">
            <Link className="btn btn-primary" id="previouspage" to="/music">
              &#8592; Go Back
            </Link>
          </div>

          {this.state.isAdmin === true ? (
            <div className="row" id="superAdmin">
              <div className="col-md-12">
                <i
                  className="far fa-plus-square fa-2x"
                  onClick={this.handleShow}
                />
              </div>

              <div className="static-modal">
                <Modal show={this.state.show} onHide={this.handleClose}>
                  <Modal.Header closeButton>
                    <Modal.Title>Add Track</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>
                    <Addtracklist
                      albumId={this.state.musicId}
                      userId={this.state.userId}
                      closeModal={this.handleClose}
                    />
                  </Modal.Body>
                </Modal>
              </div>
            </div>
          ) : null}
          <div className="row">
            <div className="col-md-4">
              <div className="trackContainer">
                <ol>
                  {this.state.trackData.map((rows, index) => (
                    <div
                      className="trackName data-tip-right"
                      data-tip={"View " + rows.trackName}
                      key={rows.trackName + "-" + rows.track_music_id}
                      onClick={e => this.showLyrics(index)}
                    >
                      <li tabIndex={index}>
                        {index + 1 + ". " + rows.trackName}
                        <i className="fas fa-arrow-right" />
                      </li>
                    </div>
                  ))}
                </ol>
              </div>
            </div>
            <div className="col-md-8">
            // This is where I'm stuck I'm not sure how I can render lyrics based off of the track name.
              {this.state.trackData.map((row, index) =>
                this.state.lyricId === index ? (
                  <div className="trackLyrics">{row.trackLyrics}</div>
                ) : null
              )}
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

export default Musictracks;

以上代码段是我尝试根据用户单击的曲目名称来呈现歌词的尝试。

Answer 1

没关系，我想通了。我在代码中犯了一个小错误。我只需要用索引替换row.index就可以了。编辑了我的问题。

有条件地根据轨道索引渲染歌词？

1 个答案: