Reactjs 在react/redux中获取最新信息 快速总结

我希望能够观看视频，并在视频中给定的时间戳上创建一些注释。我目前正在使用库来流式传输视频，并使用CRA创建react/redux项目。我发现在创建便笺时很难获得视频的最新时间戳

细节 感兴趣的主要组件是两个兄弟组件。为了简化，假设我们有一个

App.js

文件，其中包含

VideoPlayer

组件和

AddNoteButton

组件

下面是每个组件中正在发生的事情，非常简单

视频播放器

导出函数VideoPlayer（）{
常量player=useRef（空）；
常量播放=使用选择器（选择播放）；
const dispatch=usedpatch（）；
返回(
{
调度（设置播放（假））；
}}
onPlay={（）=>{
调度（设置播放（真））；
}}
onProgress={（progress）=>dispatch（setProgress（progress））}
播放={播放}
/>
);
}

• 播放

  和

  进度

  都保存为redux状态

AddNoteButton

导出函数AddNoteButton（）{
const[visible，setVisible]=useState（false）；
const[start，setStart]=useState（）；
const progress=使用选择器（selectProgress）；
const dispatch=usedpatch（）；
常量showModal=（）=>{
dispatch（setPlaying（false））；//调度操作以停止播放播放器
设置开始（进度。播放秒）；
setVisible（真）；
};
返回(
{pauseStart}
);
}

问题 当用户单击AddNoteButton中的按钮时，会发生以下情况：

它调度

setPlaying（false）

，将redux中的

播放状态更改为false

使用播放器的当前时间戳显示模式

看到

playing

的更新值后，

ReactPlayer

停止运行

---

注意，在2到3之间有一段短时间玩家没有停止。因此，我们看到的是在函数

showmodel

创建时从redux状态检索到的便笺中的时间戳，这不一定是实际

ReactPlayer

停止的位置（总是更早），理想情况下，我们希望在停止后在

player.current.getCurrentTime（）

创建便笺。实现这一目标有没有办法？感谢您的帮助

你能把

showmodel

调用放在react player的

onPause

回调道具中吗？我认为这将颠倒步骤2和步骤3的顺序，因此模式将在玩家暂停后显示，希望有正确的时间戳

第一个问题。不幸的是，状态更新是异步的，您有这个问题是有道理的。您需要一种方法，在客户端停止媒体的同时在客户端设置时间戳。不幸的是，这不起作用，因为每当播放器暂停时，都会调用onPause。因此，每当视频暂停时，该模式就会弹出，这不是我们想要的行为。

export function AddNoteButton() {
  const [visible, setVisible] = useState(false);
  const [start, setStart] = useState();
  const progress = useSelector(selectProgress);
  const dispatch = useDispatch();

  const showModal = () => {
    dispatch(setPlaying(false)); // dispatches action to stop playing player
    setStart(progress.playedSeconds);
    setVisible(true);
  };

  return (
    <>
      <Button onClick={showModal} />
      <Modal title="Add Note" visible={visible}>
        <div>{pauseStart}</div>
      </Modal>
    </>
  );
}