React调用props.history.push导致多步表单state重置问题

调用props.history.push()后state重置不是普通重渲染导致的，本质是两个问题：

• setState异步批处理冲突：React类组件的setState默认是异步批量执行的，同步调用next_step()后立刻执行路由跳转，路由触发的更新会先于state更新执行，step+1的操作根本没来得及写入state。
• 组件被卸载重挂载而非重渲染：你当前跳转的目标路由和表单页路由没有复用ItemPage组件，React会直接卸载旧的组件实例，挂载一个全新的ItemPage，新实例的state自然会回到初始定义的0值。

方案1：将步骤状态和URL绑定（最推荐，符合多步表单URL同步的需求） #

多步表单的步骤本身就应该和URL映射，刷新页面、分享链接时都能保留当前步骤，不会出现状态丢失：

1. 调整路由配置，给表单路径增加可选的step参数，示例路径：/items/:itemId/:step?
2. 组件初始化state时优先从URL读取步骤值，没有匹配到参数时默认取0：

   state = {
     step: Number(this.props.match.params.step) || 0
   }
   

3. 把路由跳转逻辑统一收口到next_step/prev_step方法中，不要在按钮点击事件里零散写push逻辑，确保状态更新和URL跳转同步：

   next_step = () => {
     const targetStep = this.state.step + 1
     this.setState({ step: targetStep })
     this.props.history.push(`/items/${this.props.item.id}/${targetStep}`)
   }
   
   prev_step = () => {
     const targetStep = this.state.step - 1
     this.setState({ step: targetStep })
     this.props.history.push(`/items/${this.props.item.id}/${targetStep}`)
   }
   

4. 所有步骤的上一步/下一步按钮直接调用统一的步进方法即可，第二步的按钮不需要单独写push逻辑。

方案2：跳转非表单页时，用setState回调执行路由跳转 #

如果第二步点击Next后是跳转到独立的非表单页面，不需要停留在多步表单组件内，就把路由跳转放到setState的完成回调里，等state更新落地后再执行跳转，避免更新丢失：

1. 改造步进方法，支持传入状态更新完成后的回调：

   next_step = (afterUpdate) => this.setState(
     (prevState) => ({ step: prevState.step + 1 }),
     afterUpdate
   )
   

2. 第二步按钮的点击事件改成回调形式调用push：

   <Button
     onClick={() => {
       next_step(() => {
         props.history.push(`/items/${item.id}`)
       })
     }}
   >
     Next
   </Button>
   

方案3：调整路由配置，复用组件实例 #

如果跳转前后的页面都需要复用ItemPage组件，检查路由配置，不要给同属表单流程的多个路径重复声明component: ItemPage，这种写法会让React认为是不同的路由组件，跳转时强制卸载重挂载。可以把多步表单相关的路由收拢到同一个父路由下，子路由切换时父组件ItemPage不会被销毁，state会正常保留。

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