如何在FlatList中获取AsyncStorage存储的数据？

Let's break this down into straightforward steps to get your saved posts showing up in a FlatList. First, we'll fix a small issue in your save function, then walk through fetching the data and rendering it properly.

Step 1: Tweak the savePosts Function #

Your current code has a minor problem: you declared posts as a const, which can't be reassigned. Plus, let's stick to async/await consistently instead of mixing it with .then() for cleaner, more readable code:

savePosts = async () => {
  try {
    const post = {
      postId: '1',
      postTitle: 'This is an example',
    };
    // Get existing posts or initialize an empty array
    const storedPosts = await AsyncStorage.getItem('posts');
    const posts = storedPosts ? JSON.parse(storedPosts) : [];
    // Add the new post to the array
    posts.push(post);
    // Save the updated array back to AsyncStorage
    await AsyncStorage.setItem('posts', JSON.stringify(posts));
    console.log('Post saved successfully!');
  } catch (error) {
    console.error('Error saving post:', error);
  }
};

Step 2: Fetch Data & Render with FlatList #

Now, let's build a complete component that fetches your saved posts on mount, stores them in state, and renders them using FlatList. We'll also add functionality to test adding new posts:

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

const PostList = () => {
  const [posts, setPosts] = useState([]);

  // Fetch saved posts when the component loads
  useEffect(() => {
    fetchPosts();
  }, []);

  const fetchPosts = async () => {
    try {
      const storedPosts = await AsyncStorage.getItem('posts');
      if (storedPosts) {
        setPosts(JSON.parse(storedPosts));
      }
    } catch (error) {
      console.error('Error fetching posts:', error);
    }
  };

  // Updated save function that updates state immediately
  const saveNewPost = async () => {
    try {
      // Create a unique post ID using timestamp for testing
      const newPost = {
        postId: Date.now().toString(),
        postTitle: `New Post ${posts.length + 1}`
      };
      const updatedPosts = [...posts, newPost];
      await AsyncStorage.setItem('posts', JSON.stringify(updatedPosts));
      setPosts(updatedPosts); // Update state to show new post right away
    } catch (error) {
      console.error('Error saving post:', error);
    }
  };

  // Render individual post items
  const renderPostItem = ({ item }) => (
    <View style={styles.postItem}>
      <Text style={styles.postId}>Post ID: {item.postId}</Text>
      <Text style={styles.postTitle}>{item.postTitle}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Button title="Add New Post" onPress={saveNewPost} />
      <FlatList
        data={posts}
        keyExtractor={(item) => item.postId}
        renderItem={renderPostItem}
        // Show a message when there are no posts
        ListEmptyComponent={() => (
          <Text style={styles.emptyMessage}>No posts saved yet! Tap the button to add one.</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    paddingHorizontal: 10
  },
  postItem: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
    marginVertical: 5
  },
  postId: {
    fontSize: 14,
    color: '#666'
  },
  postTitle: {
    fontSize: 18,
    fontWeight: '500',
    marginTop: 5
  },
  emptyMessage: {
    textAlign: 'center',
    marginTop: 50,
    fontSize: 16,
    color: '#888'
  }
});

export default PostList;

Quick Notes to Remember: #

• State Management: We use useState to hold the posts array so any updates (like adding a new post) instantly trigger a re-render of the FlatList.
• Key Extractor: Always provide a unique keyExtractor (we use postId here) to avoid React Native warnings and improve performance.
• Immediate State Update: After saving a new post, we update the component state right away instead of re-fetching from AsyncStorage—this makes the UI feel responsive.

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