我正在使用Video-React在我的项目中实现视频播放功能：
<Player
ref={(player) => {
this.state.player = player;
}}
src={videoURL}
></Player>
我正在以这种方式跟踪状态变化：
componentDidUpdate(prevProps, prevState) {
if (this.state.player) {
this.state.player.subscribeToStateChange(
this.handleStateChange.bind(this)
);
}
}
handleStateChange(state, prevState) {
const userHasJustPlayedVideo = prevState.paused && !state.paused;
const userHasJustPausedVideo = !prevState.paused && state.paused;
if (userHasJustPlayedVideo) {
console.group("userHasJustPlayedVideo: PREVIOUS STATE");
console.log("previous state: ", prevState);
console.groupEnd();
console.group("userHasJustPlayedVideo: CURRENT STATE");
console.log("state: ", state);
console.groupEnd();
}
if (userHasJustPausedVideo) {
console.group("userHasJustPausedVideo: PREVIOUS STATE");
console.log("previous state: ", prevState);
console.groupEnd();
console.group("userHasJustPausedVideo: CURRENT STATE");
console.log("state: ", state);
console.groupEnd();
}
}
问题：handleStateChange当我暂停/播放视频时被多次调用，它遵循这种模式。
换句话说， state 属性paused从 true 到 false 或从 false 到 true 转换，并且对于那个ONE STATE TRANSITITON，handleStateChange被称为MORE THAN ONCE并且递增（参见下面的评论）。
// After I play and pause the 1st time
// userHasJustPlayedVideo block gets logged 1 time
// userHasJustPausedVideo block gets logged 2 times
// After I play and pause the 2nd time
// userHasJustPlayedVideo block gets logged 2 times
// userHasJustPausedVideo block gets logged 3 times
// After I play and pause the 3rd time
// userHasJustPlayedVideo block gets logged 3 times
// userHasJustPausedVideo block gets logged 4 times
// And so on and so forth
// Everytime there's an extra log
// It seems that handleChange gets called one extra time
// Everytime I play and pause
// Which doesn't make sense
我只需要在这里执行一次逻辑：
if (userHasJustPausedVideo) {
// LOGIC TO BE EXECUTED ONCE
}
但是，对于当前的实现，该逻辑将被执行多次。
知道我做错了什么吗？