我正在尝试使用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>
);
}
}
最佳答案
您可以使用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
。
关于javascript - react-sound-强制React组件更新并定位?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43917468/