我的应用程序中有一个页面,它是一个带有大量设置(过滤器、时间范围等)的交互式图表。我想将它们存储在应用程序内状态,因为某些设置可能会被另一个页面上的其他组件使用,但现在如果我单击任何其他选项卡并返回到上一个选项卡,则页面会显示初始状态(图表消失了,过滤后的数据消失了,日期范围显示了默认值,下拉列表也显示了默认值)。并且状态也显示null
。
最佳答案
组件状态中的任何内容都是动态的;也就是说,它是暂时的。如果刷新窗口,旧状态就会丢失。当您打开一个新选项卡时,会发生类似的情况 - 您将获得构造函数中声明的状态。如果您希望在另一个选项卡中显示状态数据,您可以使用以下任一选项:
仅仅使用 redux 并不能解决你的问题,因为 redux 存储也与特定的浏览器选项卡相关。如果您想在浏览器刷新时保留 redux 状态,最好使用 redux 中间件来实现。查看redux-persist , redux-storage中间件。
如果您使用的是
react-router
,您只需在打开新标签页时通过链接传递所需的状态即可。这是一个例子:
<Link to={{
pathname: '/pathname',
state: { message: 'hello, im a passed message!' }
}}/>
- 只需将数据存储在
localStorage
中,并在其他选项卡中访问localStorage
即可。
关于javascript - 我们如何在多个选项卡(页面)中使用相同的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49384212/