Estoy tratando de obtener mis datos del almacenamiento local (React Native Async Storage) y luego insertar estos datos en una matriz (arrayItems) que se usa para los datos de la lista plana. Mi problema es que mis datos no se cargan en la lista plana y no estoy seguro de qué hacer. Creo que el problema se debe a que obtengo los datos del almacenamiento local primero después de que se haya procesado la lista plana. Intenté usar useEffect para obtener los datos antes de representar la lista plana, pero esto no parece resolver el problema.
Mi código:
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>);
Almacenamiento local https://github.com/react-native-async-storage/async-storage
puede agregar otro allKeys cuando obtenga todas las teclas a las que llamará.
Me gusta
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]);Cuando esté usando el estado que está cambiando en react-native, asegúrese de usar el enlace useState. Porque la pantalla nunca se volverá a renderizar y mostrar con los nuevos datos. Esto se debe a que UseState hace que su componente se vuelva a procesar cada vez que hay una llamada a las funciones de actualización.
Haz algo como esto a continuación
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>