有条件地呈现基于偏离轨道索引的歌词

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

尽管我想明白了。我在代码中犯了一个小错误。我只需要用index替换row.index就行了。编辑了我的问题。