React表单刷新或页面跳转时sessionStorage未保存最后输入的问题排查

问题根源 #

React 的 setValues 是异步更新状态的 API，调用后不会立刻修改当前作用域下的 values 变量。你原本的代码逻辑是调用 setValues 之后立刻将当前作用域的 values 序列化存入 sessionStorage，此时存入的仍然是更新前的旧状态值，所以每次都会丢失最后一位输入的内容。

你修改后的代码逻辑是正确的 #

你提前将更新后的完整状态计算到临时变量 formValues 中，同时把这个最新值传给 setValues 和存入 sessionStorage，规避了异步状态更新导致的取值滞后问题，自然就解决了内容丢失的问题。

额外优化建议 #

你原本代码的 else 分支还存在两个小问题，建议同步修改：

• 分支中使用的 prop 变量未定义，应该替换为 event.target.name 才能正确匹配对应的表单字段
• 同样存在异步更新导致存储旧值的问题，建议和 if 分支一样先计算最新的状态值，再执行状态更新和存储操作
  参考修改后的 else 分支代码：

else {
  const formValues = {...values, [event.target.name]: initialValues[event.target.name]}
  setValues(formValues)
  sessionStorage.setItem('values', JSON.stringify(formValues))
}

内容的提问来源于stack exchange，提问作者Paul Choppin