How to loop through a list returned by AsyncStorage

Question

I have following code returning a list from AsyncStorage like this:

[
  {"startTime":"111","endTime":"222"},
  {"startTime":"222","endTime":"333"}`enter code here`
]

const [data, setData] = React.useState();


const fetchValues = async () => {
    try {
      let listvalues = JSON.parse(await AsyncStorage.getItem("@registration"));
    } catch (err) {
      console.log("error in list getting: ", err);
    }
};

I tried typing

const listValues = await fetchValues();

but this gives an error

await is only allowed inside async functions),

so instead I tried:

React.useEffect(async () => {
    const scopeListValues = await fetchValues();
    setData(scopeListValues);
});

But that also gives an error

useEffect must not return anything besides a function, which is used for clean-up.

What I want to do is to loop though a list like this:

return (
  { registrations.map((item) => {
          return (
            <View key={item.key}>
              <Text style={styles.itemStyle}>{item.startTime}</Text>
            </View>
          );
     })
  }
)

First of all, your fetchValues function does not return anything ... — derpirscher
– derpirscher, Commented Jan 21, 2023 at 16:12

Yakupguly Malikov · Accepted Answer · 2023-01-21 19:08:10Z

1

Basically, you can setData after fetched from Asyncstorage:

React.useEffect(()=>{
   AsyncStorage.getItem("@registration").then((_data) => {
      const data = _data && JSON.parse(_data);
      setData(data);
    });
},[])

Also, you are mapping through registrations but you set value to data so change it with data:

return (
  { data.map((item) => {
          return (
            <View key={item.key}>
              <Text style={styles.itemStyle}>{item.startTime}</Text>
            </View>
          );
     })
  }
)

answered Jan 21, 2023 at 19:08

Yakupguly Malikov

7191 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rasmus Over a year ago

React.useEffect(() => {     AsyncStorage.getItem("@registration").then((_data) => {       const data = _data && JSON.parse(_data);       setData(data);       console.log("data: " + data); // prints data: [object Object],[object Object],[object Object],[object Object],[object Object]     });   }, []);

This prints out [object Object],[object Object]... is that intentional? Maybe I should leave out the && JSON.parse(_data); part ?

Rasmus Over a year ago

This prints out [object Object],[object Object]... is that intentional? Is that how arrays should look like? I thought it were more like this: [{object Object}, {object Object}] Anyway, it helped. Thanks!

Yakupguly Malikov Over a year ago

Your data is object array so it should print like that but if you want to see data in it you can print it like this console.log(JSON.stringify(data)).

PhantomSpooks · Accepted Answer · 2023-01-21 21:43:38Z

1

First fetch values need to return something

const fetchValues = async () => {
    let result = []
    try {
      let listvalues = JSON.parse(
        await AsyncStorage.getItem("@registration")
       );
    result = listvalues

    } catch (err) {
      console.log("error in list getting: ", err);
    }
    return result
}

Next, useEffect shouldnt be passed an async function. You can either use then and risk entering callback hell, or you could create and then call a async function in the useEffect:

// using then
React.useEffect(()=>{
   fetchValues.then(res=>{
     setData(Array.from(res))
   })
},[])
// creating async function
React.useEffect(()=>{
  const getData = async ()=>{
    const fetchResults = await fetchValues();
    const listData = Array.from(fetchResults);
    setData(listData)
  }
  // dont forget to call it
  getData()
},[])

edited Jan 21, 2023 at 21:43

answered Jan 21, 2023 at 16:39

PhantomSpooks

3,6202 gold badges10 silver badges16 bronze badges

2 Comments

Rasmus Over a year ago

Thank you. I tried but I couldn't make it work so I went for the solution by Yakup Malikov instead.

PhantomSpooks Over a year ago

Ah I forgot to add result=listdata in fetchValues

Collectives™ on Stack Overflow

How to loop through a list returned by AsyncStorage

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related