javascript - 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。