在 react jsx 中一次遍历一个数组

Question

如何在 react jsx 中的数组"tracks"中一次迭代一个索引。我希望能够在数组中一次只迭代和显示一个轨道，并在单击标记为"下一步"的按钮时转到下一个轨道(索引(，单击按钮时也返回到上一个索引"上一个"。

constructor(props){
super(props);
this.state=({
year: (props.location.state && props.location.state.year) || '',
all_tracks: {tracks:[]},
currentTrack: 0,
});
}
onClickNext(){ //Next button
//Nothing done here yet
}
onClickPrev(){ //Previous button
//Nothing done here yet
}
render(){
const {
currentTrack,
all_tracks: { tracks }
} = this.state;
return (
window.addEventListener('DOMContentLoaded', (event) => { 
this.gettingTracks() //Have tracks load immediately
}),
<div id = "song"> //THIS PART
<iframe id="track" src={tracks[currentTrack]
? "https://open.spotify.com/embed/track/"+tracks[currentTrack].id
: "Song N/A"} ></iframe>
</div>
<div>
<button id="nextBtn"> Next </button>
</div>
<div>
<button id="prevBtn"> Previous </button>
</div>
);
}

这是我填充轨道数组的地方

gettingTracks(){
// store the current promise in case we need to abort it
if (prev !== null) {
prev.abort();
}
// store the current promise in case we need to abort it
prev = spotifyApi.searchTracks('genre: pop year:' + this.state.year, {limit: 20, offset:1});
prev.then((data) => {
this.setState({
all_tracks: { 
tracks: data.tracks.items
}
})
prev = null;
}, function(err) {
console.error(err);
});
}

Answer 1

您可以将当前曲目的索引存储为状态变量。您无需遍历曲目以显示它们，只需显示当前曲目即可。

这里有一个简单的例子，

import React from "react";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
all_tracks: {
tracks: []
},
currentTrack: 0
};
this.onClickNext = this.onClickNext.bind(this);
this.onClickPrev = this.onClickPrev.bind(this);
}
componentDidMount() {
// fetch the data  from the Spotify API and update this.state.all_tracks.tracks
}
onClickNext() {
//Next button
this.setState(prevState => {
if (this.state.currentTrack === this.state.all_tracks.tracks.length - 1) {
return;
}
return {
...prevState,
currentTrack: prevState.currentTrack + 1
};
});
}
onClickPrev() {
//Previous button
this.setState(prevState => {
if (this.state.currentTrack === 0) {
return;
}
return { ...prevState, currentTrack: prevState.currentTrack - 1 };
});
}
render() {
const {
currentTrack,
all_tracks: { tracks }
} = this.state;
// before rendering tracks[currentTrack].name check if tracks[currentTrack] exist
return (
<>
<div>
<h3>Current Track</h3>
<h4>
{
tracks[currentTrack] 
? tracks[currentTrack].name 
: 'track does not exist'
}
</h4>
</div>
<div>
<button id="nextBtn" onClick={this.onClickNext}>
Next
</button>
</div>
<div>
<button id="prevBtn" onClick={this.onClickPrev}>
Previous
</button>
</div>
</>
);
}
}

检查代码沙箱以进行演示