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();
    }
  }

问题：当我暂停/播放视频时，会多次调用 handleStateChange 并且它遵循此模式。
换句话说，状态属性 paused 从真到假或从假到真转换，对于那个 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
    }

但是，根据当前的实现，逻辑将被执行多次。

知道我做错了什么吗？

Answer 1

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

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

查看 docs 的方法部分中的 subscribeToStateChange(listener)

Video-React：handleStateChange 在只应调用一次时被多次调用

1 个答案: