如何在React Native中使用AsyncStorage存储多条用户数据并展示？

核心问题分析 #

你当前的问题出在两个点：一是每次存储时直接用单个键覆盖了旧数据，没有把新用户数据追加到数组中；二是没有将存储的数据读取后渲染到页面上。

解决方案步骤 #

1. 存储多条用户数据的正确方式 #

每次添加新用户时，先读取已存储的用户数组，把新数据追加进去，再重新存储：

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

// 存储新用户的函数
const saveUser = async (newUser) => {
  try {
    // 读取已有用户数据，无数据则初始化空数组
    const existingUsers = await AsyncStorage.getItem('users');
    const usersArray = existingUsers ? JSON.parse(existingUsers) : [];
    
    // 追加新用户
    usersArray.push(newUser);
    
    // 重新存储数组（必须转成字符串，AsyncStorage仅支持字符串存储）
    await AsyncStorage.setItem('users', JSON.stringify(usersArray));
  } catch (error) {
    console.error('存储用户失败:', error);
  }
};

2. 读取所有用户并在屏幕展示 #

在组件中读取存储的用户数组，用状态管理数据，再渲染到页面：

import { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function UserListScreen() {
  const [users, setUsers] = useState([]);

  // 组件挂载时读取用户数据
  useEffect(() => {
    fetchUsers();
  }, []);

  // 读取用户数据的函数
  const fetchUsers = async () => {
    try {
      const storedUsers = await AsyncStorage.getItem('users');
      if (storedUsers) {
        setUsers(JSON.parse(storedUsers));
      }
    } catch (error) {
      console.error('读取用户失败:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>所有用户信息</Text>
      {users.map((user, index) => (
        <View key={index} style={styles.userCard}>
          <Text>用户名: {user.username}</Text>
          <Text>邮箱: {user.email}</Text>
          {/* 根据你的实际用户数据结构，添加其他需要展示的字段 */}
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  userCard: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginBottom: 10,
  },
});

3. 关键注意事项 #

• 存储数组必须用JSON.stringify()转成字符串，读取时用JSON.parse()转回数组，这是AsyncStorage的存储规则要求。
• 用户注册成功后，调用saveUser函数保存数据，若需要实时刷新页面，可以在保存后立即调用fetchUsers更新状态。

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