javascript - 我们如何在多个选项卡(页面)中使用相同的状态？

Question

我的应用程序中有一个页面，它是一个带有大量设置(过滤器、时间范围等)的交互式图表。我想将它们存储在应用程序内状态，因为某些设置可能会被另一个页面上的其他组件使用，但现在如果我单击任何其他选项卡并返回到上一个选项卡，则页面会显示初始状态(图表消失了，过滤后的数据消失了，日期范围显示了默认值，下拉列表也显示了默认值)。并且状态也显示null。

Answer 1

组件状态中的任何内容都是动态的；也就是说，它是暂时的。如果刷新窗口，旧状态就会丢失。当您打开一个新选项卡时，会发生类似的情况 - 您将获得构造函数中声明的状态。如果您希望在另一个选项卡中显示状态数据，您可以使用以下任一选项:

1. 仅仅使用 redux 并不能解决你的问题，因为 redux 存储也与特定的浏览器选项卡相关。如果您想在浏览器刷新时保留 redux 状态，最好使用 redux 中间件来实现。查看redux-persist , redux-storage中间件。

2. 如果您使用的是 react-router，您只需在打开新标签页时通过链接传递所需的状态即可。这是一个例子:

<Link to={{ 
  pathname: '/pathname', 
  state: { message: 'hello, im a passed message!' } 
}}/>

只需将数据存储在 localStorage 中，并在其他选项卡中访问 localStorage 即可。