Question

我对React很新，并且有一个多步骤配置文件创建表单。我已经为sessionStorage寻找了一个最好的用例，但似乎没有人对这种或那种方式充满热情。目前我将表格作为主要组成部分：

render() {
switch (this.state.step) {
  case 2:
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /.
  case 3:
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} />
  case 4:
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} />
  case 5:
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} />
  default:
    return <Step nextStep={this.nextStep} />
}
}

这些步骤中的每一个都有多个输入字段，我想知道将这些值存储在其组件（或localstorage）中的sessionStorage而不是state或redux Store是不好的做法，并在所有字段后将它们发送到后端已被收集。

Answer 1

让我们谈谈订单流程，因为这是我目前在项目中所做的事情。订单流程包含多种形式的步骤。

整个订单状态存储在某个地方（无论是在父组件，还原商店，本地存储或其组合中的状态）。
每个步骤/表单本身仅更新订单状态的相关部分 - 表单感兴趣的部分。
在表单提交上，有一种机制可以验证表单并允许或不允许转换到下一步（更多关于此信息）

使用有限状态机管理从步骤A到B（或从B到C或任何其他）的转换。它保存当前的Order状态（告诉应该呈现什么形式），步骤的定义和跨步骤的状态转换。

在转换尝试时，如果已注册，则会调用钩子。钩子的结果表明状态机是否应该允许转换和更新Order 州。钩子可以是同步的，也可以是异步的......

嗯，这个理论。

我选择的有限状态机https://github.com/jakesgordon/javascript-state-machine/tree/v3

实施与项目有关。

Answer 2

这取决于。我说你需要一个非常具体的理由在会话或本地存储中保存它。这个原因可能是，即使用户刷新页面，您也需要表单字段保持不变。

您仍然可以将Redux与本地存储一起使用。您只需使用本地存储，初始化Redux状态，并使用Redux操作更新本地存储。

因此，如果您从Redux开始，如果您确定您确实需要输入在会话之间保持持久性，则可以随后添加会话本地存储。

使用SessionStorage

2 个答案: