React Native - Using FlatList and Local Storage-CodePudding

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

CodePudding user response：

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(() => {
try {
  getLocalStorageKeys();
  // Use a temp arr 
  const tempArr = [];
  for (let i = 0; i < allKeys.length; i  ) {
    tempArr.push(getItem(allKeys[i]));
  }
  // Set the state
  setArrayItems(tempArr);
} catch (e) {}
}, []);

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

CodePudding user response：

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

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