AsyncStorage未定义报错：React Native单例存储类开发问题

嘿，我来帮你搞定这个报错问题，咱们一步步排查：

1. 先检查AsyncStorage的导入方式（大概率是核心问题） #

从React Native 0.60版本开始，官方已经把AsyncStorage从核心库移到了单独的@react-native-async-storage/async-storage包，原来react-native里的AsyncStorage已经被废弃甚至移除了。你当前的导入方式会引用到一个不存在的模块，这很可能是报错的根源。

修正步骤：

• 先安装依赖：

  npm install @react-native-async-storage/async-storage
  # 或者用yarn
  yarn add @react-native-async-storage/async-storage
  

• 替换你的导入代码：

  // 删掉原来的import ReactNative, { AsyncStorage } from "react-native";
  import AsyncStorage from '@react-native-async-storage/async-storage';
  

2. 检查调用setItem时传入的value是否有效 #

报错提示「value is not defined」，说明你调用StorageHandler.setItem(key, value)的时候，第二个参数value可能是undefined或者根本没传。咱们可以在方法里加个校验，提前拦截无效值：

修改你的setItem方法：

static async setItem(key, value) {
  console.log("Values on StorageHandler", key, value);
  
  // 先校验value是否存在
  if (value === undefined || value === null) {
    console.error('不能在AsyncStorage中存储undefined或null值');
    return;
  }
  
  // 注意：AsyncStorage只能存字符串，对象/数组要先转成JSON字符串
  const storedValue = typeof value === 'object' ? JSON.stringify(value) : value;
  
  try {
    await AsyncStorage.setItem(key, storedValue);
  } catch (error) {
    console.error(error);
  }
}

3. 优化getItem方法（可选，但更实用） #

既然存对象的时候转成了字符串，取的时候也要解析回来，不然拿到的是JSON字符串而不是对象：

static async getItem(key) {
  try {
    const value = await AsyncStorage.getItem(key);
    // 如果有值且是JSON字符串，解析成对象/数组
    return value ? JSON.parse(value) : value;
  } catch (error) {
    console.log(error);
  }
}

额外小优化：确保类是单例（静态类） #

你的类用了静态方法，本身就不会被实例化，但可以加个私有构造函数，防止有人不小心实例化它：

export default class StorageHandler {
  // 私有构造函数，禁止实例化
  constructor() {
    throw new Error('StorageHandler是静态工具类，请直接使用静态方法');
  }

  // 上面的getItem和setItem方法
}

现在你再试试调用setItem，应该就能解决这个报错了！

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