AsyncStorage Data Retrieval Issue

Question

Trying to retrieve data from AsyncStorage to put in a FlatList. Using the hard-coded data object DATA works fine. It's reading the data set in AsyncStorage that seems to be an issue. I can see the data in a console log and it looks correct:

 LOG  all bits: {"setup":"Setup 1","punchline":"Punchline 1","id":0},{"setup":"Setup 2","punchline":"Punchline 2","id":1},{"setup":"Setup 3","punchline":"Punchline 3","id":2},{"setup":"Setup4","punchline":"Punchline4","id":3}

and the app is reading that there are 4 objects there.

It's just not reading the individual keys inside. they are all undefined.

import React, { useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { StyleSheet, View, FlatList, Button} from "react-native";
import Item  from '../Components/item';

// const DATA = [
//  {
//      "id": 0,
//      "punchline": "To get to the other side",
//      "setup": "Why I the chicken cross the road",
//      "title": "Chicken Butt",
//      "status": "draft",
//  },
//  {
//      "id": 1,
//      "punchline": "2To get to the other side",
//      "setup": "2Why I the chicken cross the road jdkjkjsjkjjkdsl",
//      "title": "Chicken Butt Part Duex",
//      "status": "Active",
//  },
//  {
//      "id": 2,
//      "punchline": "3To get to the other side",
//      "setup": "3Why I the chicken cross the road",
//      "title": "Bit Title",
//      "status": "test",
//  },
// ];

export default function BitList({navigation}) {
    const [bitList, setBitList] = useState(null);

    const getIds = async () => {
        try {
            let storedIds = JSON.parse(await AsyncStorage.getItem("@bit-ids"));
            if (!storedIds) {
                return (storedIds = []);
            } else {
                return storedIds;
            }
        } catch (e) {
            console.error("Something happened while getting ids: " + e);
        }
    };

    const getAllBits = async () => {
        const ids = await getIds();
        const bitIds = [];
        if (ids) {
            ids.forEach((id) => {
                bitIds.push("@bit-" + id);
            });
            try {
                const allBits = await getMultipleBits(bitIds);
                console.log("all bits: " + allBits)
                setBitList(allBits);
            } catch (e) {
                console.error(e);
            }
        }
    };

    const getMultipleBits = async (bitIds) => {
        const allBits = [];
        try {
            const savedData = await AsyncStorage.multiGet(bitIds);
            savedData.forEach((bit) => {
                allBits.push(bit[1]);
            });
            return allBits;
        } catch (e) {
            console.error(e);
        }
    };

    useEffect(() => {
        getAllBits();
        // (async () => {
        //  const awaitedVal = await getAllBits();
        //  console.log("lg :" +awaitedVal)
        //  setBitList(awaitedVal);
        // })();
        // setBitList(DATA)
        // console.log(DATA);
        }, []);

    return (
        <View style={styles.container}>
            {bitList && (
                <FlatList
                    data={bitList}
                    renderItem={({ item }) => (
                        <Item
                            setup={item.setup}
                            punchline={item.punchline}
                            status={item.status ? item.status : "none"}
                            bitId={item.id}
                            navigation={navigation}
                        />
                    )}
                    keyExtractor={(item) => item.id}
                />
            )}
            {/* <Button title="refresh" onPress={() => []} /> */}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

I've tried Parsing, Stringify. I originally had all my async calling in their own file and exported them for use all over the app. Moved these specific calls into the actual component and it's still the same issue.

Answer 1

If you're having trouble retrieving data from AsyncStorage and displaying it in a FlatList, despite seeing the data correctly logged, there might be an issue with the data transformation or the way you're setting the data to the FlatList.

Here's an example of how you might retrieve data from AsyncStorage and display it in a FlatList:

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

const YourComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Function to retrieve data from AsyncStorage
    const retrieveData = async () => {
      try {
        // Retrieve data from AsyncStorage
        const storedData = await AsyncStorage.getItem('your_key'); // Replace 'your_key' with your actual AsyncStorage key

        if (storedData !== null) {
          // Parse the retrieved data (assuming it's stored as a string)
          const parsedData = JSON.parse(storedData);
          setData(parsedData); // Set the retrieved data to the state
        }
      } catch (error) {
        console.log('Error retrieving data:', error);
      }
    };

    retrieveData(); // Call the function to retrieve data when component mounts
  }, []); // Empty dependency array ensures this effect runs only once

  return (
    <View>
      <FlatList
        data={data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <Text>{item.name}</Text> // Adjust this based on your data structure
        )}
      />
    </View>
  );
};

export default YourComponent;

1 AsyncStorage Key: Replace 'your_key' with the actual key you used to store the data in AsyncStorage.

2 Data Structure: Adjust the renderItem function within FlatList to match your data structure. In the example, it assumes each item in the data array has a name property.

By setting the retrieved data to the state using setData(parsedData), it should update the state and trigger a re-render, displaying the data in the FlatList. If the data appears correctly in the console but not in the FlatList, ensure that the data is structured correctly and that the FlatList is correctly receiving and rendering the data.