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

Question

如何在 React jsx 中一次迭代数组 'tracks' 中的一个索引。我希望能够在数组中一次只迭代和显示一个曲目，然后单击将标记为 'Next' 的按钮转到下一个曲目（索引），也返回到上一个单击按钮 'Previous'.

时的索引

  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>
      </>
    );
  }
}

检查 codesandbox 以获得演示

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

Iterating through array one at a time in react jsx

arrays

spotify

jsx

reactjs