中止组件卸载？

Question

我有一个多步骤向导表单，如果发生验证错误，我将无法进入下一步。

问题是，我总是可以使用浏览器＆＃34;返回＆＃34;按钮转到上一步（已通过验证的步骤），将输入更改为某些无效数据，然后使用浏览器前进按钮返回当前步骤，这意味着我已经绕过＆＃34;绕过＆＃34;验证。

我不确定在离开当前步骤之前是否可以进行检查，如果出现问题则可以防止离开，我希望实现类似

的功能

function reverseStr(str) {
  // string is 0 or 1 characters. nothing to reverse
  if (str.length <= 1) {
    return str;
  }

  // return the first character appended to the end of the reverse of 
  // the portion after the first character
  return reverseStr(str.substring(1)) + str.charAt(0);
}

console.log(reverseStr("Hello Everybody!"));

图表示例：

正常流量为1,2,3,4 ......等等。

我尝试处理的流量是1,2,3，然后在step2屏幕中，用户按浏览器后退按钮，在step1上进行一些无效更改，然后按浏览器转发按钮。我试图看看它是否有可能勾结＆＃34;前进＆＃34;事件，进行验证，并确定是否应该保留步骤1并显示错误消息或继续执行步骤2。

棘手的部分是按要求，当您离开每一步时，表格数据需要始终保存（在浏览器内存中），以便您可以恢复它们

Answer 1

这实际上取决于数据一旦有效后的位置？我会说，实际上它发送到哪里，就在那之前做了最后的验证。

例如，如果您在步骤结束时有一个最终的“提交”或“保存”按钮，则可能有一个onSave可能有一个axios（或另一个异步调用）：

async onSave() {
    // ~~ insert validation around here ~~ //
    const response = axios.post('foo/save', this.state.data);
    this.setState({
      complete: true, 
    });
}

这不是一个真正的卸载任务。 Unmount更倾向于清除您在mount（或其他地方）期间所做的任何非反应。