Reactjs 刷新页面答案

【问题标题】：Reactjs Refresh pageReactjs 刷新页面
【发布时间】：2019-05-15 20:03:39
【问题描述】：

当我按浏览器上的 F5 按钮刷新页面时，我失去了我曾经在我的状态下拥有的所有值。如何通过按 F5 键在我的状态下保持值更新

【问题讨论】：

使用浏览器本地存储或会话存储
如果你真的需要保留这些数据，你可以使用 localStorage (developer.mozilla.org/pl/docs/Web/API/Window/localStorage)。但在大多数情况下，这不是必需的，并且在刷新后，您将拥有一个新的应用实例，而无需之前的本地更改
我不明白，因为如果我在这里按 F5 会回到我所有菜单都关闭的原始状态
什么是最好的解决方案

标签： reactjs refresh state reload

【解决方案1】：

这有点棘手，但并非不可能。

首先，这样做：Check if page gets reloaded or refreshed in Javascript

您需要认识到您的网站已重新加载，之前的代码可能会对您有所帮助。

接下来是在实际发生重新加载之前选择存储状态的位置。一种选择是将其存储在本地存储中。

如果您尝试保留的所有数据都已经在服务器上，那么对您来说最好。如果没有，那么您需要在两次刷新之间设置一些“中间点”。

您可以在识别商店正在重新加载的部分执行类似的操作：

// Site is reloading
// Store information into users local storage... all current 
// states with information of url under which data is stored

在这个地方，当网站再次加载时，你可以这样做：

// Check if there is something stored in local storage for this specific site
// When yes, fill in the states again with configured data

现在，这会给您带来很多麻烦，但它会起作用。例如，如果您不想存储数据，该怎么办？

我建议你在这里描述你的用例，并且可能有一些更好的方法来解决这个问题。

【讨论】：

【解决方案2】：

我有一个带有子菜单的菜单。我在 False 中初始化所有主菜单以加载页面以说明子菜单未打开。当我点击一个菜单来显示子菜单时，我真的说子菜单是打开的

      componentWillMount (){
    {this.props.routes.map((prop, key) => {
      if(prop.subMenus != null){
        this.setState({
          [prop.code]:false
        });
      }
    })}
  }

【讨论】：

什么是最好的解决方案

【解决方案3】：

正如其他人所说，您可以将路由状态保存在 localStorage 中（就像 cookie，但更好）用本地存储保存一些东西

localStorage.setItem('routes', JSON.stringify(this.props.routes))

在 componentDidMount 方法中你可以做到这一点

const routesString = localStorage.getItem('routes');
const routes = routesString ? JSON.parse(routesString) : undefined

【讨论】：