Question

我的 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 嵌入的（如果重要的话）。

Answer 1

您需要在 iframe 中添加一个键，否则它会与 React 路由器混淆

只需将 currentVideo 状态添加为 YoutubeEmbed 组件的键

这是更新沙箱的链接

https://codesandbox.io/s/patient-brook-zqht1?file=/src/App.js

按浏览器后退按钮会撤消我的状态而不是返回

1 个答案: