storing array state objects in asyncStorage

Question

I want to store an array state using async storage. but everytime i reload the app, it comes up blank. below is a sample code, and I have shown only the functions for better clarity.

    componentDidMount() {
      this.getDataSync();
    }


  getDataSync = async () => {
    try {
      const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);

      const parsedList = JSON.parse(list);
      const obj = Object.keys(parsedList);

      this.setState({ isDataReady: true, list: obj || [] });
    } catch (e) {
      Alert.alert('Failed to load list.');
    }
  }

  handleAdd() {
    const { firstname, lastname, email, phone} = this.state;
    const ID = uuid();
    const newItemObject = {
        key: ID,
        firstname: firstname,
        lastname: lastname,
        email: email,
        phone: phone,
        image: null,
    };

    this.setState(prevState => ({
      list: [...prevState.list, newItemObject]
    }));

    this.saveItems(this.state.list);

  }

  saveItems = list => {
    AsyncStorage.setItem(LIST_STORAGE_KEY, JSON.stringify(list));
  };

Try to log a list and obj and tell me what u got

DevAS
– DevAS

2019-11-30 09:25:26 +00:00
Commented Nov 30, 2019 at 9:25 — DevAS
– DevAS, Commented Nov 30, 2019 at 9:25

Junius L · Accepted Answer · 2019-11-30 09:54:42Z

4

You are not saving your list but getting keys from the list. const obj = Object.keys(parsedList); you are saving array indexes to state.

getDataSync = async () => {
  try {
    const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);

    const parsedList = JSON.parse(list);

  this.setState({ 
     isDataReady: true, 
     list: Array.isArray(parsedList) && parsedList.length && parsedList || [] 
  });

 } catch (e) {
    Alert.alert('Failed to load list.');
  }
}

Also pass saveItems as a callback to save the correct data.

this.setState(prevState => ({
  list: [...prevState.list, newItemObject]
}), () => this.saveItems(this.state.list));

edited Nov 30, 2019 at 9:54

answered Nov 30, 2019 at 9:40

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

Comments

Ori Drori · Accepted Answer · 2019-11-30 09:26:51Z

0

The .setState() method is may be asynchronous, so the result of setting the state, cannot be used immediately after setting it. If you want to use the results of setting the state, you should use the callback (2nd param), which is called after the state is actually set:

this.setState(
  prevState => ({
    list: [...prevState.list, newItemObject]
  }),
  () => this.saveItems(this.state.list)
);

answered Nov 30, 2019 at 9:26

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

2 Comments

vincent O Over a year ago

its not working, tried it before and tried it now, still returning an empty array.

vincent O Over a year ago

getting Array [ "0"]

Collectives™ on Stack Overflow

storing array state objects in asyncStorage

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related