我们如何在多个选项卡（页面）中使用相同的状态？

Question

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

原文由 Khal Drogo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你有一些用于状态管理的库。与 React 一起使用的最流行的是 redux。

https://redux.js.org/介绍

原文由 Bojan Ivanac 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

1. 简单地使用 redux 并不能解决你的问题，因为 redux store 也与特定的浏览器选项卡相关。如果你想在浏览器刷新时保持你的 redux 状态，最好使用 redux 中间件来做到这一点。查看 redux-persist 和 redux-storage 中间件。

2. 如果您使用的是 react-router 您可以在打开新选项卡时通过链接简单地传递所需的状态。这是一个例子：

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

1. 只需将数据存储在 localStorage 并访问 localStorage 在其他选项卡中。

原文由 Ayesha Mundu 发布，翻译遵循 CC BY-SA 4.0 许可协议