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

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!' } 
}}/>

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

Answer 2

你有一些用于状态管理的库。React 中最流行的一种是 redux。

https://redux.js.org/introduction