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