react-sound - 强制 React 组件更新并定位？

Question

我正在尝试使用react-sound. 构建一个音频播放器我想实现一个功能，它可以简单地回到音频中的某个位置。

我现在只是这样做：

goToVeryCustomPosition() {
  this.setState({playFromPosition: this.state.myVeryCustomPosition});
}

我的问题是：这行得通 - 但它只能工作一次。声音会回到指定的位置，但如果我想连续两次这样做，它就行不通了。

我猜这是因为我的组件没有更新，因为位置仍然相同。当我首先设置它时，它从位置 0（在构造函数中）变为位置 233（或任何可能的位置）。当我再次调用这个东西时，它仍然是 233，因为这是我想要做的。但由于这与之前的状态相同，React 不会更新。我该如何解决这个问题？

编辑：组件的其余部分。

构造函数：

constructor(props) {
    super(props);

    this.state = {
       playStatus: Sound.status.STOPPED,
       elapsed: 0,
       total: 0,
       playFromPosition: 0,
       myVeryCustomPosition: 1337.727
     }
  }

渲染和处理歌曲播放：

handleSongPlaying(audio){
     this.setState({
                      position: audio.position,
                      elapsed: audio.position,
                      total: audio.duration})
   }

  render() {
    return (
      <div className="row handle">
        <Sound
            url="./sound.mp3"
            playStatus={this.state.playStatus}
            onPlaying={this.handleSongPlaying.bind(this)}
            playFromPosition={this.state.playFromPosition}
            />

        <button onClick={this.togglePlay.bind(this)}>Play / Pause</button>
        <button onClick={this.repeat.bind(this)}>Replay</button>
      </div>
    );
  }
}

Answer 1

您可以使用forceUpdate

goToVeryCustomPosition() {
    if(this.state.playFromPosition != this.state.myVeryCustomPosition) {
        this.setState({playFromPosition: this.state.myVeryCustomPosition});
    } else {
        this.forceUpdate()
    }
}

您还可以做一个单独的state 变量，例如isUpdating。您将this.state.myVeryCustomPosition 设置为isUpdating 到true 并在goToVeryCustomPosition 中将其设置为false。

这样它会一直更新，你不必使用forceUpdate，这有点令人不悦。