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
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]);
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>