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

Question

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

先谢谢

Answer 1

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

1. 简单地使用redux无法解决您的问题，因为redux store也与特定浏览器选项卡相关。如果您希望在浏览器刷新期间保持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

Answer 3

对此的直接解决方案是redux-state-sync。它将正常工作，并且商店的所有选项卡甚至浏览器上的窗口都会更新。

Answer 4

如果您希望在整个应用程序中使用变量，您还可以使用 localStorage

localStorage.setItem('move', this.state.move);

完成后也不要忘记取消它！

localStorage.removeItem('move');

Answer 5

我认为您应该在您的应用中实施react-redux。 React-redux是一种状态管理工具，可以在集中位置管理应用程序的状态，并且可以随时随地访问存储中的数据。 反应，终极版： https://redux.js.org/basics/usage-with-react