Video-React：handleStateChange 被多次调用，而它应该只被调用一次

Question

我正在使用 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();
    }
  }

问题：当我 pause/play 视频时，handleStateChange 被多次调用并且它遵循这种模式。
换句话说，状态属性 paused 从 true 到 false 或从 false 到 true 的转换，为此 ONE STATE TRANSITON, handleStateChange 得到被称为 不止一次 并且是递增的（见下面的评论）。

  // 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
    }

但是，对于当前的实现，该逻辑将执行多次。

知道我做错了什么吗？

Answer 1

我猜每次状态更新时，您都会再次订阅状态更改。所以你看到了这种行为模式。

您应该订阅 componentDidMount 中的状态更改，而不是 componentDidUpdate 中的状态更改，因此它只注册一次。

查看 docs

的方法部分中的 subscribeToStateChange(listener)

Video-React：handleStateChange 被多次调用，而它应该只被调用一次

Video-React: handleStateChange gets called multiple times when it should be called only once

javascript

reactjs

video-reactjs

react-lifecycle