Possible Unhandled Promise Rejection (id:0) Warning in react native

Question

I am getting this error while trying to store data in AsyncStorage in react native and the data are also not getting added to the storage

Possible Unhandled Promise Rejection (id: 0): Error: com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String Error: com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String*

My code is like this

  //Public methods
  static addProduct(id,name,qnty){

    let   product={
        id:id,
        name:name,
        qty:qnty,

      };
      let cartResponse={};
      product.rowId = this.generateHash(hashItem);
        AsyncStorage.getItem('CART').then((data) => {
          //Check if the product already in the cartTotalItem
          if (data !== null && data.length>0) {
              if (this.checkIfExist(product.rowId)) {
                //Update product quantity
                data[product.rowId]['qty'] += product.qty;
              }else{
                //Add add product to the storage
                data[product.rowId] = product;
              }
              //Update storage with new data
              AsyncStorage.setItem("CART", data);
              cartResponse = data;
          }else{
            let cartItem ={};
            cartItem[product.rowId] =product;
              AsyncStorage.setItem("CART", cartItem);
              cartResponse =cartItem;
          }
            return true;
        }).catch(error => {
          console.log("Getting cart data error",error);
          return false;
        });
  }

I tried to look for solution and i found few links out of which this, Possible Unhandled Promise Rejection (id:0) Warning kinda old, but has same problem as me.

I tried to apply the same solution from the thread but that did not fix the issue.

Can anyone please help? ? Thank you.

Answer 1

The error is caused by setItem function. setItem is also returns a promise and your value should be a string.

Sample

AsyncStorage.setItem("CART", JSON.stringify(cartItem));

Answer 2

The promise chain can be confusing. The underlying problem is that the internal Promise rejection isn't chained to the external Promise.

const test = flag => {
  return Promise.resolve('Happy')
    .then(msg => {
      if (flag === 0) return msg;
      if (flag === 1) return Promise.reject('Kaboom!');
      if (flag === 2) Promise.reject('Crash!');
    })
    .catch(err => {
      return `Error: ${err}`;
    });
};

test(0).then(res => log(res)); //'Happy'
test(1).then(res => log(res)); //'Error: Kaboom!'
test(2).then(res => log(res)); //'undefined' then UnhandledPromiseRejectionWarning

In the examples above, (0) exits without error, (1) rejects in a chained way by returning the inner Promise, (2) exits without error but then shows the annoying warning. So the problem block in the original code should be:

if (data !== null && data.length>0) {
   if (this.checkIfExist(product.rowId)) {
      //Update product quantity
      data[product.rowId]['qty'] += product.qty;
   } else {
      //Add add product to the storage
      data[product.rowId] = product;
   }
   //Update storage with new data
   cartResponse = data;   
   return AsyncStorage.setItem("CART", data); //chain the promises
} else {
   let cartItem ={};
   cartItem[product.rowId] =product;
   cartResponse =cartItem;   
   return AsyncStorage.setItem("CART", cartItem); //chain the promises
}

By returning the AsyncStorage.setItem(...) result the outer catch can handle the error.

I realise this is an old post, but this issue confused me in the past. Hopefully this will clarify things for others.