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

Question

我正在使用Video-React在我的项目中实现视频播放功能：

 <Player
            ref={(player) => {
              this.state.player = player;
            }}
            src={videoURL}
          ></Player>

我正在跟踪 state 改变这种方式：

 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 的转换，对于那个STATE TRANSITITON ， 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

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

您应该订阅 state 更改componentDidMount而不是componentDidUpdate ，所以它只注册一次。

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