SPA + 后退按钮 + 表单状态
SPA + back button + form state
我正在将 jsp 多页应用程序 (mpa) 转换为 React 单页应用程序 (spa)。在 mpa 中，后退按钮有效，表单保留其状态。
在我的新 React 应用程序中，后退按钮可以使用，但表单不会保留其状态。
问题：是否有技巧可以让我的表单在 "backing" 之后（在 spa 中）保持其状态。
以下是我想到的两个解决方案：
将整个表单状态编码为 url。然后在每次表单更改时使用更新的 url 更新浏览器历史记录。但是，这似乎是一个巨大的痛苦。
修改我的应用程序的结构，使有问题的表单（一个 React 组件）保持挂载（并且只需使用 css 可见性或显示 属性 来显示和隐藏）。但是，在大型应用程序中，让每个页面都挂载在 DOM 中似乎可能会导致性能问题。
顺便说一下，我正在使用 popstate 和浏览器历史记录 api 来实现 SPA 行为（即我已经推出了自己的路由器），如 here 所述。
希望有人能提出比我的两个解决方案更好的解决方案。谢谢
使用 Redux 拥有一个超越任何特定组件的 state 存储。然后在您的组件中，作为表单提交过程的一部分，dispatch 一个 action 和所有表单数据的 payload。这应该缓存在状态上，然后当组件被你的导航结构重新挂载时，它应该可以通过 Reduxsconnectfunctions mapStateToProps 方法访问这个缓存。您可以从中重新填充您的表单。
从您的问题中不清楚您是否以传统的旧方式提交 form。我会在处理程序中使用 e.preventDefault，并将所有表单数据放在组件的 state 上，这可以如上所述发送到 Redux 的 state 存储，并使用 superagent 或类似的。同时可以缓存。
我最终使用了与 Wylie Кулик 的答案类似的东西，但做了一些改动：
我不想仅仅为了这个用例而切换到 Redux。所以我使用了我的顶级组件（即树上更高的组件）的组件 state。
我在表单组件的 componentWillUnmount 上缓存了表单的状态，并在 componentDidMount 上恢复了缓存状态。
我将缓存状态作为 prop 从上层组件传递给子组件。
它最终是一个非常小的代码量，并且到目前为止工作得很好。
我正在将 jsp 多页应用程序 (mpa) 转换为 React 单页应用程序 (spa)。在 mpa 中，后退按钮有效，表单保留其状态。
在我的新 React 应用程序中，后退按钮可以使用，但表单不会保留其状态。
问题：是否有技巧可以让我的表单在 "backing" 之后（在 spa 中）保持其状态。
以下是我想到的两个解决方案：
将整个表单状态编码为 url。然后在每次表单更改时使用更新的 url 更新浏览器历史记录。但是，这似乎是一个巨大的痛苦。
修改我的应用程序的结构，使有问题的表单（一个 React 组件）保持挂载（并且只需使用 css 可见性或显示 属性 来显示和隐藏）。但是，在大型应用程序中，让每个页面都挂载在 DOM 中似乎可能会导致性能问题。
顺便说一下，我正在使用 popstate 和浏览器历史记录 api 来实现 SPA 行为（即我已经推出了自己的路由器），如 here 所述。
希望有人能提出比我的两个解决方案更好的解决方案。谢谢
使用 Redux 拥有一个超越任何特定组件的 state 存储。然后在您的组件中，作为表单提交过程的一部分，dispatch 一个 action 和所有表单数据的 payload。这应该缓存在状态上，然后当组件被你的导航结构重新挂载时，它应该可以通过 Reduxsconnectfunctions mapStateToProps 方法访问这个缓存。您可以从中重新填充您的表单。
从您的问题中不清楚您是否以传统的旧方式提交 form。我会在处理程序中使用 e.preventDefault，并将所有表单数据放在组件的 state 上，这可以如上所述发送到 Redux 的 state 存储，并使用 superagent 或类似的。同时可以缓存。
我最终使用了与 Wylie Кулик 的答案类似的东西，但做了一些改动：
我不想仅仅为了这个用例而切换到 Redux。所以我使用了我的顶级组件（即树上更高的组件）的组件 state。
我在表单组件的 componentWillUnmount 上缓存了表单的状态，并在 componentDidMount 上恢复了缓存状态。
我将缓存状态作为 prop 从上层组件传递给子组件。
它最终是一个非常小的代码量，并且到目前为止工作得很好。