CODEWITHSUNDEEP
javascripttypescriptreact-nativereact-native-flatlistasyncstorage
user17280123
user17280123

Reputation:

React Native - Using FlatList and Local Storage

I am trying to get my data from local storage (React Native Async Storage) and then push this data into an array (arrayItems) which is used for the flatlist data. My problem is that my data will not load in the flatlist and im not sure what to do. I believe the issue is because im getting the data from the local storage first after the flatlist has been rendered. I have tried using useEffect to get the data before rendering the flatlist but this does not seem to solve the issue.

My Code:

const [allKeys, setGetLocalStorageKeys] = useState([]);
let arrayItems= [];

const getLocalStorageKeys = async () => {
 try {
  setGetLocalStorageKeys(await AsyncStorage.getAllKeys());
 } catch (e) {}
};

const getItem = async (prop) => {
try {
  const item= await AsyncStorage.getItem(prop);
  return item != null ? JSON.parse(item) : null;
  } catch (e) {}
};

useEffect(() => {
try {
  getLocalStorageKeys();
  for (let i = 0; i < allKeys.length; i++) {
    arrayItems.push(getItem(allKeys[i]));
  }
} catch (e) {}
}, []);
return (
<View>
  <FlatList
    data={arrayItems}
    renderItem={({ item }) => <Text>{item}</Text>}
    keyExtractor={(item) => item}
  />
</View>

);

Local Storage https://github.com/react-native-async-storage/async-storage

Upvotes: 1

Views: 735

Answers (2)

carlosdafield
carlosdafield

Reputation: 1537

When you're using state that is changing in react-native make sure to use the useState hook. Because the screen will never rerender and show with the new data. This is because UseState causes your component to re-render each time there is a call to the update functions.

Do something like this below

const [allKeys, setGetLocalStorageKeys] = useState([]);
// Make sure to use useState for changing state in react
const [arrayItems,setArrayItems] = useState([]);


const getLocalStorageKeys = async () => {
 try {
  setGetLocalStorageKeys(await AsyncStorage.getAllKeys());
 } catch (e) {}
};

const getItem = async (prop) => {
try {
  const item= await AsyncStorage.getItem(prop);
  return item != null ? JSON.parse(item) : null;
  } catch (e) {}
};

useEffect(() => {
 const fetch = async = ()=>{
   try {
     getLocalStorageKeys();
     // Use a temp arr 
    const tempArr = [];
    for (let i = 0; i < allKeys.length; i++) {
      const value = await getItem(allKeys[i]);
       tempArr.push(value);
    }
     // Set the state
     setArrayItems(tempArr);
    } catch (e) {
     console.log(e);
    }
}
// Call function
fetch();
}, [allKeys]);

return (
<View>
  <FlatList
    data={arrayItems}
    renderItem={({ item }) => <Text>{item}</Text>}
    keyExtractor={(item) => item}
  />
</View>

Upvotes: 0

Brock
Brock

Reputation: 583

you can add another useEffect when you get allKeys it will call.

Like

        useEffect(() => {
           getLocalStorageKeys();
        }, []);
    
        useEffect(() => {
          const tempArr = [];
          if(allKeys.length > 0){
            for (let i = 0; i < allKeys.length; i++) {
            tempArr.push(getItem(allKeys[i]));
            }
          }
          setArrayItems(tempArr);
        }, [allKeys]);

Upvotes: 1

Related Questions