React Native表单提交后如何持久化存储输入值，重启可回填编辑

你当前遇到的核心问题是：组件State仅存在于应用运行时的JS内存中，当应用被从近期任务列表清除时，内存会被系统完全回收，重启后State会回到初始空值，因此需要把表单数据同步写入设备的本地持久化存储，才能实现跨进程重启的留存效果。

实现核心逻辑 #

• 实时存：用户在输入框编辑内容的过程中，把最新的字段值同步写入本地持久化存储，不等表单提交再存，最大程度避免意外杀进程导致的内容丢失
• 启动读：应用重新启动、组件挂载时，第一时间从本地存储读取之前留存的表单数据，赋值给组件State，让输入框直接拿到已保存的内容自动回填
• 无额外兼容：回填的内容本身就是组件State的一部分，后续用户编辑时会正常触发原有的状态更新逻辑，天然支持编辑操作，无需额外写特殊适配代码

分步代码改造 #

1. 安装适配Expo的本地存储依赖 #

Expo项目不需要手动配置原生依赖，直接执行官方安装命令即可，自动匹配当前Expo SDK的版本：

expo install @react-native-async-storage/async-storage

2. 引入存储模块 #

在组件文件的最顶部位置，导入AsyncStorage模块：

import AsyncStorage from '@react-native-async-storage/async-storage';

3. 新增应用启动时的本地数据读取逻辑 #

在原有类组件结构基础上，新增componentDidMount生命周期方法，挂载时读取本地缓存的表单数据：

constructor(props) {
    super(props);
    this.state = {
      Place: "",
      PlaceError: "", // 错误提示状态补入初始State，避免初始化时的未定义问题
    };
}

// 组件挂载时读取本地留存的表单数据，实现自动回填
async componentDidMount() {
  try {
    // 读取本地存储中指定key的缓存内容
    const savedFormCache = await AsyncStorage.getItem('persistedFormData');
    if (savedFormCache) {
      // 把存储的JSON字符串解析为对象，赋值给组件State
      const savedData = JSON.parse(savedFormCache);
      this.setState({
        Place: savedData.Place || "" // 字段缺失时给空值兜底，避免报错
      })
    }
  } catch (err) {
    // 读取失败时静默处理，不阻塞应用正常流程
    console.log("读取表单缓存失败", err)
  }
}

4. 改造原有的输入处理逻辑 #

在用户每次修改输入内容时，除了原有的State更新操作，同步把最新值写入本地存储：

handlePlace = async (text, event) => {
    // 原有State更新逻辑保留
    this.setState({ 
      PlaceError: '',
      Place: text 
    })
    // 新增：实时同步最新的表单内容到本地持久化存储
    try {
      // 先读取已有的缓存内容，避免覆盖后续新增的其他表单字段
      const existingCache = await AsyncStorage.getItem('persistedFormData');
      const dataToPersist = existingCache ? JSON.parse(existingCache) : {};
      // 更新当前Place字段的最新值
      dataToPersist.Place = text;
      // 把对象转为JSON字符串存入本地
      await AsyncStorage.setItem('persistedFormData', JSON.stringify(dataToPersist));
    } catch (err) {
      console.log("保存表单缓存失败", err)
    }
}

5. 修正原有TextInput的取值写法，规避回填不生效的问题 #

原来的代码使用defaultValue属于非受控组件写法，这个属性只在组件首次挂载时初始化一次值，后续State的更新不会同步到输入框。刚好类组件的生命周期顺序是constructor -> render -> componentDidMount，第一次render时本地缓存还没读取完成，输入框会拿到空的初始值；等componentDidMount读完成功setState更新Place值后，因为defaultValue已经初始化过了，不会再同步内容，就会出现缓存明明读出来了、但输入框还是空的问题。
直接把defaultValue替换成受控的value属性即可，State更新时输入框内容会自动同步：

<TextInput  
  maxLength={50} 
  placeholder="Place" 
  style={styles.inputStyle}
  onChangeText={this.handlePlace} 
  value={this.state.Place}  // 替换原来的 defaultValue={this.state.Place}
/>
<Text style={{color :'red'}}>{this.state.PlaceError}</Text>

效果验证 #

• 输入内容过程中，所有存储操作都是异步执行的，不会阻塞输入流程，交互体验和原来完全一致
• 把应用从近期任务列表完全清除后重新启动，组件挂载时会自动读取之前存的内容，在输入框中自动回填
• 回填后的内容和正常输入的内容共享同一套State逻辑，用户可以直接点击输入框修改内容，没有任何操作障碍

新手落地注意事项 #

• 不建议只在表单提交按钮的点击回调里做存储：这种方式如果用户填了一半没提交就被系统杀进程，数据依然会丢失
• AsyncStorage不支持直接存储JS对象，必须转成JSON字符串后才能写入，否则会触发存储报错
• 后续新增其他表单字段（比如手机号、地址）时，只需要在对应字段的输入处理方法里，把最新值更新到persistedFormData对应的键值对里即可，不需要改动整套持久化逻辑

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