React.js保存组件的当前状态

Question

我有组件A和组件B。在组件A中，用户可以将过滤器应用于元素列表，并使用侧栏在两个组件之间导航。每当用户单击以转到B并返回到A时，筛选器将被设置回初始状态。保存组件A状态的最佳方法是什么，以便当他们返回到组件A时，可以看到最初应用的所有过滤器。

Answer 1

每次切换视图时，听起来好像A正在创建/销毁，所以它会丢失其存储的任何状态。

将状态上移到A和B的父级组件，然后通过props将其向下传递给A。父组件不会被销毁，因此状态将持续。

Thinking in React可能有助于澄清这一点。

Answer 2

我建议您使用LocalStorage，并传入过滤器，以免重置它。安装组件时，应始终首先检查localstorage是否具有值。

您可以通过以下方式进行设置：

localStorage.setItem('variableName', value);

并通过以下方式获取它：

localStorage.getItem('variableName');

Answer 3

据我所知；除非对其进行编程，否则不清除反应状态，否则页面将刷新或进入另一页面。如果您提供代码，可能会更加清楚。我用来保持先前状态的一件事是：

this.setState((previousState) => ({ stateName: previousState.stateName.concat(newValue) }))

Answer 4

我认为除非刷新页面，否则A和B的父状态不会改变。

另一种方法是，即使刷新页面，也可以使用AsynStorage或将数据存储在服务器上，以便稍后返回到组件A时进行检索。