Reactjs单击以移至数组中的下一项

Question

所以这是一个奇怪的问题。我注意到当我单击ToggleNext（）转到JS数组中的下一个项目时，即使已经设置为0，它也将从0重新开始。它应该转到1，2，3 ...等。

如何让ToggleNext（）检查SongIndex首先在哪里，然后正确地添加到其中？而不是从0重新开始？

这里有一些代码试图证明正在发生的事情。

class App extends Component {
  constructor(props) {
      super(props);
      this.TogglePrev       = this.TogglePrev.bind(this)
      this.ToggleNext       = this.ToggleNext.bind(this)
    this.state = {

  SongsList: [{PlayListID: "AD3249gVSDFhr46@", Uploader: "bob@none.com" , PlaylistName: "My Play List",  Genere: "Funk" ,Artist: "Random", SongName: "My Favorite Song Ever!" , Url: "http://streaming.tdiradio.com/classics", Duration: "03:22"}, {PlayListID: "yyyy249gVSDFhr46@", Uploader: "Mike@none.com" , PlaylistName: "My Play List",  Genere: "Funk" ,Artist: "Random", SongName: "My Favorite Song 2!" , Url: "http://streaming.tdiradio.com/classics", Duration: "04:55"},
        {PlayListID: "xxxx249gVSDFhr46@", Uploader: "bob@none.com" , PlaylistName: "House Music",  Genere: "Funk" ,Artist: "Random", SongName: "House Song 3" , Url: "http://streaming.tdiradio.com/house", Duration: "03:55"}   ],
        SongIndex: 0,

    }
      this.song = new Audio(this.state.SongsList[this.state.SongIndex].Url)

}



ToggleNext() {
    if(this.state.SongIndex < this.state.SongsList.length -1){
    this.setState(prevState => ({
        SongIndex: this.state.SongIndex + 1

    }))

  }
    if(this.state.SongIndex === this.state.SongsList.length -1){
      this.setState(prevState => ({
          SongIndex: 0,

      }))
    }


    if (this.state.Play === false){
    this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);
    this.song.play()
  }
  else if (this.state.Play === true){
    this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);

  }
  console.log(this.state.SongIndex)
  console.log(this.state.SongsList[this.state.SongIndex].Url)

}

TogglePrev() {
    if(this.state.SongIndex >= 0){
     this.setState(prevState => ({
         SongIndex: this.state.SongIndex - 1
     }))
   }

    if (this.state.SongIndex === 0){
      this.setState(prevState => ({
          SongIndex: this.state.SongsList.length -1
      }))

}
if (this.state.Play === false){
this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);
this.song.play()
}
else if (this.state.Play === true){
this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);

    }
console.log(this.state.SongIndex)
console.log(this.state.SongsList[this.state.SongIndex].Url)
}


TogglePlay() {
  if (this.state.Play === true){
    //this.audio.play()

    //I am not sureif this is ok to do..
    //this.song = new Audio(this.state.SongsList[this.state.SongIndex].Url).play();
    console.log(this.state.SongsList[this.state.SongIndex].Url)
    this.song.play()
    this.setState({PlayVisable : "none", PauseVisable: "inline-block", Play: false})
    console.log("Playing Music")

  }
  else if (this.state.Play === false){
  //  this.audio.pause();
    //this.audio = new Audio(this.state.SongsList[this.state.SongIndex].Url).pause();
  //this.audio = new Audio(this.state.SongsList[this.state.SongIndex].Url).pause();
  this.song.pause()
    this.setState({PlayVisable : "inline-block", PauseVisable: "none", Play: true})
    console.log("Music Stopped")
  }
}

Answer 1

编辑：看来问题是您有范围相关的问题。我删除了手动函数绑定，并添加了箭头函数，还更改了具有先前状态的songIndex。您可以尝试以下代码

class App extends Component {
  constructor(props) {
      super(props);
        this.state = {
            SongsList: [{PlayListID: "AD3249gVSDFhr46@", Uploader: "bob@none.com" , PlaylistName: "My Play List",  Genere: "Funk" ,Artist: "Random", SongName: "My Favorite Song Ever!" , Url: "http://streaming.tdiradio.com/classics", Duration: "03:22"}, {PlayListID: "yyyy249gVSDFhr46@", Uploader: "Mike@none.com" , PlaylistName: "My Play List",  Genere: "Funk" ,Artist: "Random", SongName: "My Favorite Song 2!" , Url: "http://streaming.tdiradio.com/classics", Duration: "04:55"},
        {PlayListID: "xxxx249gVSDFhr46@", Uploader: "bob@none.com" , PlaylistName: "House Music",  Genere: "Funk" ,Artist: "Random", SongName: "House Song 3" , Url: "http://streaming.tdiradio.com/house", Duration: "03:55"}   ],
            SongIndex: 0,
        }
      this.song = new Audio(this.state.SongsList[this.state.SongIndex].Url)
    }



ToggleNext = () => {
    if(this.state.SongIndex < this.state.SongsList.length -1){
        this.setState(prevState => ({
            SongIndex: prevState.SongIndex + 1
        }))

  }
    if(this.state.SongIndex === this.state.SongsList.length -1){
      this.setState(prevState => ({
          SongIndex: 0
      }))
    }
    if (this.state.Play === false){
    this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);
    this.song.play()
  }
  else if (this.state.Play === true){
    this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);

  }
  console.log(this.state.SongIndex)
  console.log(this.state.SongsList[this.state.SongIndex].Url)

}

TogglePrev = () => {
    if(this.state.SongIndex >= 0){
     this.setState(prevState => ({
         SongIndex: this.state.SongIndex - 1
     }))
   }

    if (this.state.SongIndex === 0){
      this.setState(prevState => ({
          SongIndex: this.state.SongsList.length -1
      }))

}
if (this.state.Play === false){
this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);
this.song.play()
}
else if (this.state.Play === true){
this.song.setAttribute('src', this.state.SongsList[this.state.SongIndex].Url);

    }
console.log(this.state.SongIndex)
console.log(this.state.SongsList[this.state.SongIndex].Url)
}


TogglePlay = () => {
  if (this.state.Play === true){
    //this.audio.play()

    //I am not sureif this is ok to do..
    //this.song = new Audio(this.state.SongsList[this.state.SongIndex].Url).play();
    console.log(this.state.SongsList[this.state.SongIndex].Url)
    this.song.play()
    this.setState({PlayVisable : "none", PauseVisable: "inline-block", Play: false})
    console.log("Playing Music")

  }
  else if (this.state.Play === false){
  //  this.audio.pause();
    //this.audio = new Audio(this.state.SongsList[this.state.SongIndex].Url).pause();
  //this.audio = new Audio(this.state.SongsList[this.state.SongIndex].Url).pause();
  this.song.pause()
    this.setState({PlayVisable : "inline-block", PauseVisable: "none", Play: true})
    console.log("Music Stopped")
  }
}