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

Question

我的 React 网站有一个视频轮播，带有“下一个”和“上一个”按钮，用于循环浏览各种视频。我保存当前正在显示的视频的 URL 状态。这样，当按下“下一个”或“上一个”按钮时，我只需使用适当的视频 URL 更新状态并显示该视频。

出于某种原因，浏览器后退按钮现在会在返回上一页之前逐一撤消所有状态更改。因此，例如，如果我按“Next”、“Next”、“Next”，我必须按浏览器后退按钮 4 次才能转到上一页。我不知道为什么，我用 Google 搜索过我自己盲目地试图解决这个问题。

当用户按下任一按钮时调用的函数：

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 添加一个 key 否则它会搞乱 react router

只需将当前视频状态添加为 YoutubeEmbed 组件的键

这里是link更新沙箱

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

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

Pressing the browser back button undoes my state instead of going back

reactjs

react-router

browser-history