I'm building a simple react native mobile app and get data from AsyncStorage. Here is a function that gets the data when the component mounts
getClassData = async id => {
const allRegs = (await AsyncStorage.getItem("regs")) || "[]";
const items = JSON.parse(allRegs);
console.log("All REGS", items);
const classData = items.map((y, i) => (
<View key={i}>
<Text>{y.email}, {y.name}</Text>
</View>
));
console.log('ALL DATA',str)
};
the first output is normal and looks like this.
All REGS
Array [
Object {
"classID": 1,
"email": "Mp@fgh.com",
"name": "Allen",
},
]
but after the map function that out in the console is this
ALL DATA
Array [
Object {
"$$typeof": Symbol(react.element),
"_owner": null,
"key": "0",
"props": Object {
"children": Object {
"$$typeof": Symbol(react.element),
"_owner": null,
"key": null,
"props": Object {
......
Why isn't this simply giving me the output I expected (just a simple output with the data in views and text? Thanks.
AsyncStorage returns a promise. You need to call .then()
to get the value when it is ready.
getClassData = async id => {
await AsyncStorage.getItem("regs").then((allRegs) => {
const items = JSON.parse(allRegs);
console.log("All REGS", items);
const classData = items.map((y, i) => {
return(
<View key={i}>
<Text>{y.email}{y.name}</Text>
</View>
);
});
console.log('ALL DATA', str);
});
};
const items = [
{
name:'aaaa',
email:'aaaa@gmail.com'
},
{
name:<View>aksjdha</View>,
email:'bbbb@gmail.com'
},
<View>qwds</View>
]
let classData = items.map((y, i) => (
<View key={i}>
<Text>{y.email}, {y.name}</Text>
</View>
));
you have something like jsx in your array object check it once.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.