React Native中Class Model结合AsyncStorage使用问题求助

问题根源分析 #

• 问题1：直接操作this.userName仅修改内存中的实例属性，未持久化到AsyncStorage，APP刷新后实例重新初始化，属性值自然丢失。
• 问题2：getUserName是异步函数，返回的是Promise对象，React无法直接渲染Promise实例，因此抛出"Objects are not valid as a React child"错误。

改造GlobalUserModel #

我们需要让模型同时维护内存属性与AsyncStorage的双向同步，同时封装通用方法支持多属性快速扩展：

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

class GlobalUserModel {
  constructor() {
    // 初始化内存属性，后续从AsyncStorage加载数据覆盖
    this.userName = null;
    this.userEmail = null;
    this.phoneNumber = null;
    this.refreshToken = null;
    this.token = null;
    this.isEmailVerified = false;

    // 初始化时自动从本地存储加载所有数据
    this.initFromStorage();
  }

  // 通用加载单个属性的私有方法
  async _loadProperty(key) {
    try {
      const value = await AsyncStorage.getItem(key);
      if (value !== null) {
        // 针对布尔值做类型转换（AsyncStorage仅支持字符串存储）
        this[key] = key === 'isEmailVerified' ? value === 'true' : value;
      }
    } catch (error) {
      console.error(`加载${key}失败:`, error);
    }
  }

  // 批量加载所有属性
  async initFromStorage() {
    await Promise.all([
      this._loadProperty('userName'),
      this._loadProperty('userEmail'),
      this._loadProperty('phoneNumber'),
      this._loadProperty('refreshToken'),
      this._loadProperty('token'),
      this._loadProperty('isEmailVerified'),
    ]);
  }

  // 通用设置属性并持久化的私有方法
  async _setProperty(key, value) {
    try {
      // 先更新内存属性
      this[key] = value;
      // 布尔值转字符串后存储
      const storedValue = typeof value === 'boolean' ? value.toString() : value;
      await AsyncStorage.setItem(key, storedValue);
    } catch (error) {
      console.error(`设置${key}失败:`, error);
    }
  }

  // 同步getter：直接返回内存中的值，避免Promise渲染问题
  getUserName() {
    return this.userName ?? 'N/A';
  }

  getUserEmail() {
    return this.userEmail ?? 'N/A';
  }

  getIsEmailVerified() {
    return this.isEmailVerified;
  }

  // 异步setter：更新内存+持久化存储
  setUserName(name) {
    return this._setProperty('userName', name);
  }

  setUserEmail(email) {
    return this._setProperty('userEmail', email);
  }

  setIsEmailVerified(status) {
    return this._setProperty('isEmailVerified', status);
  }

  // 可按上述格式继续扩展phoneNumber、refreshToken等属性的get/set方法
}

// 导出单例，确保全局只有一个用户实例，避免数据不一致
export const globalUser = new GlobalUserModel();

在React组件中正确使用 #

由于初始化是异步操作，组件中需配合状态管理加载状态与数据：

import { useEffect, useState } from 'react';
import { Text, View, Button } from 'react-native';
import { globalUser } from './GlobalUserModel';

function UserProfile() {
  const [userName, setUserName] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      // 等待本地存储数据加载完成
      await globalUser.initFromStorage();
      setUserName(globalUser.getUserName());
      setIsLoading(false);
    };

    fetchUserData();
  }, []);

  // 修改用户名示例
  const handleUpdateName = async (newName) => {
    await globalUser.setUserName(newName);
    setUserName(newName);
  };

  if (isLoading) {
    return <Text>加载中...</Text>;
  }

  return (
    <View>
      <Text>当前用户名: {userName}</Text>
      <Button 
        title="修改为测试用户" 
        onPress={() => handleUpdateName('测试用户')} 
      />
    </View>
  );
}

关键改进点 #

1. 单例模式：全局仅一个用户实例，避免多实例导致的数据不一致。
2. 双向同步：修改属性时同时更新内存与AsyncStorage，刷新后自动从存储加载数据。
3. 同步getter：直接返回内存值，彻底解决Promise渲染错误问题。
4. 通用方法封装：_loadProperty与_setProperty可快速扩展到所有属性，减少重复代码。
5. 类型兼容：针对布尔值做类型转换，适配AsyncStorage仅支持字符串存储的特性。

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