我有组件 A 和组件 B。在组件 A 中,用户可以将过滤器应用于元素列表,并使用侧栏在两个组件之间导航。每当用户单击转到 B 并返回 A 时,过滤器都会设置回初始状态。保存组件 A 状态的最佳方法是什么,以便当他们回到它时,他们会看到他们最初应用的所有过滤器。
Reactjs 保存组件的当前状态
IT技术
reactjs
2021-05-06 21:34:05
4个回答
我建议你使用 LocalStorage ,传入过滤器,这样它就不会被重置。安装组件后,您应该始终首先检查 localstorage 是否有值。
您可以通过以下方式设置:
localStorage.setItem('variableName', value);
并通过以下方式获取:
localStorage.getItem('variableName');
听起来每次切换视图时 A 都会被创建/销毁,因此它会丢失它正在存储的任何状态。
将状态向上移动到 A 和 B 的父组件,并通过 props 将其向下传递给 A。父组件不会被销毁,因此状态将持续存在。
在 React 中思考可能有助于澄清这一点。
据我所知;react 中的状态不会被清除,直到它被编程为这样做,页面被刷新或转到另一个页面。如果您提供代码,也许会更清楚。我用来保持以前状态的一件事如下:
this.setState((previousState) => ({ stateName: previousState.stateName.concat(newValue) }))
我认为除非刷新页面,否则 A 和 B 的父状态不会改变。
另一种方法是,您可以使用 AsynStorage 或将该数据存储在服务器上,以便稍后在返回组件 A 时检索它,即使您刷新页面。
其它你可能感兴趣的问题