问题标签 [browser-state]

我想检查 Firefox 窗口是否处于活动状态或空闲状态。下面提到的代码在 chrome 窗口中工作。但不是在 Firefox 中。

在我的应用程序中，我有一个搜索信息的上下文。我可以进行新的搜索、清除搜索等——一切正常。

问题是，当我单击浏览器的后退按钮时，我的上下文不会使用旧数据更新。

以前我使用history.push并推送了一个状态对象，我在所有组件中都使用了它。在将所有这些切换为使用上下文之后，我遇到了麻烦。

代码设置有点像这样：

• 一个总体组件 SiteLayoutProvider

我的状态的定义：

• const [searchData, setSearchData] = useState(null)

以及包含以下内容的返回语句：

现在我可以使用它并将这个上下文拉到我需要它的任何地方useContext。我可以执行搜索setSearchData，并且子组件中的任何 console.logs 都是准确的——我可以清除搜索并执行新的搜索，并且信息仍然被准确记录。但是当我单击后退按钮时，上下文中的内容以及记录的内容并不代表以前的数据。

我是否完全误解了“香草”上下文的功能？我需要使用history.push吗？这样做的“正确”方法是什么？

我有这个用例：一个页面在一个hashrouter下有两个子页面

例如

在#details 哈希路由中，我想听“后退按钮点击”并在页面关闭之前进行一次 api 调用以更新帖子。

在此期间想要显示一个微调器，然后在完成 api 调用后让浏览器完成 window.history.back（后退按钮逻辑）

这可能吗，怎么做？

我现在正在尝试并取得部分成功。我正在使用React带有 NextJS 的框架，并且在一个组件中包含以下代码

在上面的代码片段handleWantToClose中，单击返回导航浏览器按钮（或移动返回按钮 ios/android）时调用正常

问题是我不能延迟弹出状态。它不会等待承诺完成解决。

handleWantToClosefuncion 只是做一个 api 调用，然后调用 resolve 函数。

任何想法 ？这对于为移动用户提供出色的网站用户界面非常有用，尤其是那些back button经常浏览网站的用户。

我尝试过的其他事情

在我的 popstatelistener 上，然后在 api 调用完成后，手动触发 window.history.back() 但没有工作。

popstate 事件是不可取消的。