Итерации по массиву по одному в React JSX - PullRequest
Новая
       87

Итерации по массиву по одному в React JSX

1 голос
/ 30 мая 2020

Как выполнить итерацию по одному индексу в массиве «треков» в react jsx. Я хочу иметь возможность перебирать и отображать только одну дорожку за раз в массиве и go для следующей дорожки (индекса) одним нажатием кнопки, которая будет помечена как «Далее», а также go назад к предыдущему индексу при нажатии кнопки «Назад». 

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

1 Ответ

1 голос
/ 30 мая 2020

Вы можете сохранить индекс текущего трека как переменную состояния. И вместо того, чтобы перебирать дорожки для их отображения, вы можете просто отобразить текущую дорожку.

Вот простой пример: 

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

Проверьте codeandbox для демонстрации

...