tengo el siguiente código que devuelve el valor de AsyncStorage
const getData = async () => { try { let listlayana = JSON.parse(await AsyncStorage.getItem('layanan')); return listlayana }catch (e){ } } const datas = getData()y estoy tratando de hacer un bucle en el resultado de esta función con este
{ datas.map((item, i) => ( <TouchableOpacity key={i}> <View key={i} style={styles.listitem}> <Text style={styles.listtext} >{item.nmlayanan}</Text> <Text style={[styles.listtext, {color: "#b4b3b3"}]}> > </Text> </View> </TouchableOpacity> )) }y tengo este siguiente error
undefined is not a function (near '...datas.map...')Puede usar React.useEffect y React.useState para este objetivo de esta manera:
const [data, setData] = React.useState(); //add this useState for the data const getData = async () => { try { let listlayana = JSON.parse(await AsyncStorage.getItem("layanan")); return listlayana; } catch (e) {} }; // and add this async useeffect for fetching data from asyncstorage React.useEffect(async () => { const scopeData = await getData(); setData(scopeData); }, []);y luego tu función de renderizado así:
{data.map((item, i) => ( <TouchableOpacity key={i}> <View key={i} style={styles.listitem}> <Text style={styles.listtext}>{item.nmlayanan}</Text> <Text style={[styles.listtext, { color: "#b4b3b3" }]}> > </Text> </View> </TouchableOpacity> ))}y su componente así:
export default function SOF() { const [data, setData] = React.useState(); const getData = async () => { try { let listlayana = JSON.parse(await AsyncStorage.getItem("layanan")); return listlayana; } catch (e) {} }; React.useEffect(async () => { const scopeData = await getData(); setData(scopeData); }); return ( <View> {data.map((item, i) => ( <TouchableOpacity key={i}> <View key={i} style={styles.listitem}> <Text style={styles.listtext}>{item.nmlayanan}</Text> <Text style={[styles.listtext, { color: "#b4b3b3" }]}> > </Text> </View> </TouchableOpacity> ))} </View> ); }