React Native 多步表单页来回跳转不丢失已填数据的解决方案咨询

核心问题原因：表单状态分散存储在各页面内部的useState中，页面跳转（尤其是回退、replace重置路由等操作）触发页面卸载后，内部状态会被销毁，仅依赖路由参数传值无法覆盖反向跳转、多步来回切换的场景。

方案1：上层Context存储全量表单状态（最优通用方案） #

该方案不依赖路由特性，耦合度低，适配任意跳转逻辑，是多步表单的首选实现：

• 首先创建表单Context托管所有步骤的表单数据

import { createContext, useContext, useState } from 'react';

const MultiStepFormContext = createContext();

export const MultiStepFormProvider = ({ children }) => {
  // 初始化所有步骤的表单字段结构
  const [formData, setFormData] = useState({
    step1: {},
    step2: {},
    step3: {}
  });

  // 提供单步更新方法
  const updateStepData = (stepKey, data) => {
    setFormData(prev => ({
      ...prev,
      [stepKey]: { ...prev[stepKey], ...data }
    }));
  };

  return (
    <MultiStepFormContext.Provider value={{ formData, updateStepData }}>
      {children}
    </MultiStepFormContext.Provider>
  );
};

// 封装自定义Hook方便页面调用
export const useMultiStepForm = () => useContext(MultiStepFormContext);

• 将Provider包裹在分步表单所属路由的外层，比如3个表单页都在同一个Stack Navigator下，就把Provider套在该Stack的外层
• 每个表单页不再用内部useState存数据，直接从useMultiStepForm取对应步骤的数据，修改时调用updateStepData更新，跳转时不需要再通过路由参数传递已填数据，任意来回切换都不会丢失数据

方案2：利用React Navigation 5的路由参数更新特性（适合轻量表单，无需引入额外状态管理） #

如果不想额外加Context层，也可以利用路由参数可变的特性实现状态同步：

• 第一步进入表单页时，初始化全量表单参数传入路由
• 每个页面修改数据时，调用navigation.setParams更新全局的表单数据：

// 页面内修改字段后更新路由参数
const handleFieldChange = (field, value) => {
  const currentForm = route.params.formData || {};
  navigation.setParams({
    formData: {
      ...currentForm,
      step1: { ...currentForm.step1, [field]: value }
    }
  });
};

• 跳转下一页时直接取路由内的formData传递即可，回退时上一页的参数也会保留，不会丢失

注意事项 #

• 不要用navigation.replace代替navigation.push做步骤跳转，replace会销毁上一页的路由实例，即使依赖参数也可能出现状态丢失
• 如果需要实现App杀掉重启后仍可继续填写的需求，可以在Context的更新逻辑里加AsyncStorage持久化存储逻辑，同步更新本地缓存

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