How to display all the items from Async Storage in react Native

Question

I want to display all the items, like if I have stored 5 items, 5 Elements are shown with there respective information which is there in the items.

I want to add/remove items also.

I have used this

getAllKeys = async () => {
  let keys = []
  try {
    keys = await AsyncStorage.getAllKeys()
  } catch(e) {
    // read key error
  }

  console.log(keys)
  // example console.log result:
  // ['@MyApp_user', '@MyApp_key']
}

But getting an error.

If I use state with useEffect then it becomes an infinite loop

Answer 1

Have you tried to use the second arguments of useEffect?
It lets you define an array of variable to watch in order to rerun the effect.
If you use an empty array it means that the effect is called only at the first rendering.

const [keys, setKeys] = useState([])

useEffect(() => {

   AsyncStorage.getAllKeys()
    .then(setKeys)
    .catch(e => {}//handle error)

}, [] //no variable in watch so it get fired only the first time)