我的应用程序中有一个页面，它是一个带有一系列设置（过滤器、时间范围等）的交互式图表。我想将它们存储在应用程序状态中，因为某些设置可能会被另一个页面上的其他组件使用，但是现在如果我单击任何其他选项卡并返回上一个选项卡，则该页面会显示初始状态（图表消失，过滤数据消失，日期范围显示默认值，下拉列表也显示默认值）。而且状态也显示出来了null。
我们如何在多个选项卡（页面）中使用相同的状态？
IT技术
javascript
jquery
reactjs
2021-05-08 12:38:56
4个回答
组件状态中的任何内容都是动态的；即，它是暂时的。如果刷新窗口，旧状态将丢失。当您打开一个新选项卡时会发生类似的事情——您在构造函数中声明了状态。如果您想要另一个选项卡中的状态数据，您可以使用以下任何一项：
简单地使用 redux 并不能解决您的问题，因为 redux 存储也与特定的浏览器选项卡相关。如果你想在浏览器刷新时保持你的 redux 状态，最好使用 redux 中间件来做到这一点。查看redux-persist， redux-storage中间件。
如果您正在使用
react-router，则可以在打开新选项卡时通过链接简单地传递所需状态。下面是一个例子：
<Link to={{
pathname: '/pathname',
state: { message: 'hello, im a passed message!' }
}}/>
- 只需将数据存储在其他选项卡中
localStorage并在其中访问localStorage。
如果您希望在整个应用程序中使用变量，您还可以使用localStorage
localStorage.setItem('move', this.state.move);
完成后也不要忘记取消设置！
localStorage.removeItem('move');
对此的直接解决方案是redux-state-sync。它会正常工作，并且商店将在浏览器上的所有选项卡甚至窗口上更新。
我认为您应该在您的应用程序中实现 react-redux。React-redux 是一种状态管理工具，可以在一个集中位置管理应用程序的状态，并且您可以随时随地访问存储中的数据。React-redux：https ://redux.js.org/basics/usage-with-react