React Native中如何使用AsyncStorage存储带唯一id的对象数组数据？

当前React Native官方已将AsyncStorage从核心库移出，使用前需确保已安装@react-native-async-storage/async-storage依赖，并完成iOS/Android端的原生配置

1. 封装基础读写方法 #

AsyncStorage仅支持字符串存储，所以读写时需要做JSON序列化/反序列化处理：

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

// 读取存储的对象数组
const getStoredList = async () => {
  try {
    const listStr = await AsyncStorage.getItem('YOUR_STORAGE_KEY');
    return listStr ? JSON.parse(listStr) : [];
  } catch (e) {
    console.error('读取存储数据失败:', e);
    return [];
  }
};

// 写入对象数组到存储
const saveListToStorage = async (list) => {
  try {
    await AsyncStorage.setItem('YOUR_STORAGE_KEY', JSON.stringify(list));
  } catch (e) {
    console.error('存储数据失败:', e);
  }
};

使用时请将YOUR_STORAGE_KEY替换为自定义的存储键名。

2. 生成唯一ID的工具方法 #

不需要引入第三方依赖的轻量实现：

const generateUniqueId = () => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
};

如果需要更高的唯一性，也可以引入uuid库的v4方法。

3. 文本输入提交时的存储逻辑 #

假设你已经声明了文本输入框的状态变量inputText，用户点击提交按钮时触发以下逻辑即可：

const handleSubmit = async () => {
  // 校验输入内容非空
  if (!inputText.trim()) return;

  // 1. 读取已有存储列表
  const existingList = await getStoredList();
  // 2. 生成新的存储对象
  const newItem = {
    id: generateUniqueId(),
    content: inputText.trim(),
    createTime: Date.now() // 可选字段，可按需扩展其他属性
  };
  // 3. 合并新旧数据
  const updatedList = [...existingList, newItem];
  // 4. 存回AsyncStorage
  await saveListToStorage(updatedList);
  // 5. 清空输入框（可选操作）
  setInputText('');
};

注意事项 #

• 存取数据都是异步操作，必须加async/await处理，避免出现数据未更新的问题
• 如果存储的数组长度很大，建议拆分存储或者增加分页逻辑，避免单次读写耗时过长
• 清空存储数据可以调用AsyncStorage.removeItem('YOUR_STORAGE_KEY')实现

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