如何解决按浏览器后退按钮会撤消我的状态而不是返回
我的 React 网站有一个带有“下一个”和“上一个”按钮的视频轮播,用于循环播放各种视频。我保存当前正在显示的视频的 URL 状态。这样,当按下“下一个”或“上一个”按钮时,我只需使用适当的视频 URL 更新状态并显示该视频。
出于某种原因,浏览器的后退按钮现在会在返回上一页之前一一撤消所有状态更改。因此,例如,如果我按“下一步”、“下一步”、“下一步”,在进入上一页之前,我必须按浏览器后退按钮 4 次。我不知道为什么,我用谷歌搜索我自己盲目地试图解决这个问题。
当用户按下任一按钮时调用的函数:
const changeVideo = (dir) => {
let index = movie.videoUrls.findIndex(v => v === currentVideo)
//movie.videoUrls contains the URLs of all the videos to be displayed
if(dir === 'next') {
if(index === movie.videoUrls.length - 1)
setCurrentVideo(movie.videoUrls[0])
else
setCurrentVideo(movie.videoUrls[index+1])
return;
}
if(dir === 'prev') {
if(index === 0)
setCurrentVideo(movie.videoUrls[movie.videoUrls.length - 1])
else
setCurrentVideo(movie.videoUrls[index-1])
return;
}
}
注意:所显示的视频是 YouTube 嵌入的(如果重要的话)。
解决方法
您需要在 iframe 中添加一个键,否则它会与 React 路由器混淆
只需将 currentVideo 状态添加为 YoutubeEmbed 组件的键
这是更新沙箱的链接
https://codesandbox.io/s/patient-brook-zqht1?file=/src/App.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。