为何AsyncStorage.setItem无法正常工作？自定义GetSetStorage类调用异常求助

让我帮你排查代码里的几个关键问题，这些都是导致功能异常的常见原因：

1. 语法错误：未完成的代码 #

你的代码最后一行是consol...，这明显是console拼写错误且代码未完成，会直接导致JavaScript解析失败，整个setStorageAsync方法都无法正常执行。必须把这部分修正为完整的错误处理逻辑，比如console.error(error)。

2. AsyncStorage导入已过时 #

从React Native 0.60版本开始，官方已经把AsyncStorage从核心库中移除，转而使用独立的@react-native-async-storage/async-storage包。你原来的导入方式import { AsyncStorage } from 'react-native';在新版本中要么找不到模块，要么功能异常。

你需要先安装这个独立包：

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

然后修改导入语句：

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

3. 存储值的类型限制 #

AsyncStorage只能存储字符串类型的数据，如果你的value是对象、数字、数组等非字符串类型，直接传入setItem会导致存储失败或者数据损坏。你需要先用JSON.stringify()把数据转换成字符串，读取时再用JSON.parse()解析回来。

4. 冗余的Promise包裹 #

AsyncStorage.setItem本身就返回一个Promise，你不需要手动再包裹一层Promise，这不仅多余，还容易导致错误处理逻辑混乱。

额外小细节：拼写错误 #

你代码里的console.log(vaue =>${value});中vaue是拼写错误，应该是value，虽然这个不会直接导致功能异常，但会影响调试信息的准确性，建议修正。

修正后的完整代码 #

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

class GetSetStorage {
  async setStorageAsync(key, value) {
    console.log('start set storage');
    console.log(`key => ${key}`);
    console.log(`value => ${value}`);
    
    try {
      // 自动处理非字符串值的转换
      const storedValue = typeof value === 'string' ? value : JSON.stringify(value);
      await AsyncStorage.setItem(key, storedValue);
      console.log('存储操作完成');
      return true;
    } catch (error) {
      console.error('存储失败:', error);
      throw error; // 抛出错误让调用方自行处理
    }
  }

  // 配套的获取方法（可选补充）
  async getStorageAsync(key) {
    try {
      const value = await AsyncStorage.getItem(key);
      if (value !== null) {
        // 尝试解析JSON，失败则返回原始字符串
        try {
          return JSON.parse(value);
        } catch {
          return value;
        }
      }
      return null;
    } catch (error) {
      console.error('获取失败:', error);
      throw error;
    }
  }
}

export default new GetSetStorage();

调用示例 #

import storage from './GetSetStorage'; // 根据你的文件路径调整

// 存储字符串
storage.setStorageAsync('username', 'Morton')
  .then(() => console.log('用户名存储成功'))
  .catch(err => console.log(err));

// 存储对象
storage.setStorageAsync('userInfo', { id: 1, name: 'Morton', age: 25 })
  .then(() => console.log('用户信息存储成功'))
  .catch(err => console.log(err));

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