AsyncStorage not working properly with react native on android

Question

AsyncStorage is not letting me overwrite or remove data.

This is my data

const allData = [
  {
    txnId: '012',
    category: '',
    time: 'Today, 2:00pm',
    amount: 129,
    type: 'Personal',
    images: [],
  },
  {
    txnId: '011',
    category: '',
    time: 'Today, 1:00pm',
    amount: 20,
    type: 'Personal',
    images: [],
  },
  {   
    txnId: '010',
    category: '',
    time: 'Today, 10:00am',
    amount: 200,
    type: 'Personal',
    images: [],
  },
  {
    txnId: '009',
    category: '',
    time: 'Yesterday, 11:40pm',
    amount: 649,
    type: 'Personal',
    images: [],
  },
  {
    txnId: '008',
    category: '',
    time: 'Yesterday, 6:00pm',
    amount: 200,
    type: 'Personal',
    images: [],
  },
  {   
    txnId: '007',
    category: '',
    time: 'Yesterday, 11:30am',
    amount: 2200,
    type: 'Personal',
    images: [],
  },
  {
    txnId: '006',
    category: '',
    time: 'Yesterday, 09:00am',
    amount: 200,
    type: 'Personal',
    images: [],
  },
  {
    txnId: '005',
    category: '',
    time: 'Yesterday, 10:00am',
    amount: 200,
    type: 'Personal',
    images: [],
  },
  {    
    txnId: '004',
    category: '',
    time: 'Yesterday, 09:00am',
    amount: 200,
    type: 'Personal',
    images: [],
  },
  {
    txnId: '003',
    category: 'Travel',
    time: 'Today, 12:20pm',
    amount: 2300,
    type: 'Business',
    status: 'Pending',
    images: [],
  },
  {
    txnId: '002',
    category: 'Food',
    time: 'Today, 12:02pm',
    amount: 1000,
    type: 'Business',
    status: 'Rejected',
    images: [],
  },
  {
    txnId: '001',
    category: 'Food',
    time: 'Yesterday, 07:00am',
    amount: 200,
    type: 'Business',
    status: 'Approved',
    images: [],
  }
];

The following functions are where I want to save and retrieve from AsyncStorage.

componentDidMount() {
AsyncStorage.getItem('allData').then(res => {
  this.setState({
    allData: JSON.parse(res),
  });
});
console.log(this.state.allData);
}

componentWillUnmount() {
AsyncStorage.removeItem('allData');
AsyncStorage.setItem('allData', JSON.stringify(this.state.allData));
BackAndroid.removeEventListener('hardwareBackPress', this.handlesBackButton);
}

setCategory(index) {
const newData = this.state.allData.map((item, i) => {
  const value = item;
  if (i === index) {
    value.type = item.type === 'Personal' ? 'Business' : 'Personal';
    value.status = item.type === 'Personal' ? '' : 'Pending';
    value.category = item.type === 'Personal' ? '' : 'Select category';
  }
  return value;
});
AsyncStorage.mergeItem('allData', JSON.stringify(newData));
this.setState({
  allData: newData,
});
console.log(this.state.allData);
}

My render function contains the following

return (
                <Transactions
                  allData={this.state.allData}
                  setCategory={(index, category) => {
                    const newData = this.state.allData.map((item, i) => {
                      const value = item;
                      if (index === i) {
                        value.category = category;
                      }
                      return value;
                    });
                    AsyncStorage.mergeItem('allData', JSON.stringify(newData));
                    this.setState({
                      allData: newData,
                    });
                    console.log(this.state.allData);
                  }}
                  onChange={this.setCategory.bind(this)}
                />);

There is nothing wrong with the state and props. Commenting out all the AsyncStorage stuff and logging the state and props gives expected result.

I think the main problem here is being caused by AsyncStorage.getItem. Without this method, all the functions and stuff work as expected. I tried putting it inside componentWillUpdate and componentWillMount as well and got the same result. What am I doing wrong?

Someone please help.

Answer 1

When you called AsyncStorage.getItem('allData'), The first item you get back from the promise is the error object. The second item will be the data you want.

Try this:

AsyncStorage.getItem('allData').then((error, res) => {
  this.setState({
    allData: JSON.parse(res),
  });
});