Unable to successfully remove item using Asyncstorage

const deleteProduct = prod => {
    Alert.alert(
      'Delete Product',
      `Are you sure you want to remove ${prod.id}?`,
      [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: async (productKey = prod.item) => {
            try {
              await AsyncStorage.removeItem(productKey);
              // RNRestart.Restart();
            } catch (err) {
              console.error(err);
            }
          },
        },
      ],
    );
  };

I'm having trouble with the deleteProduct, it won't delete the item even though I've followed the instructions on the documentation.

I attempted to delete an item using the onLongPress event within a TouchableWithoutFeedback element in a React Native app. The TouchableWithoutFeedback is enclosed within a FlatList.

typescriptreact-nativereact-hooksasync-awaitasyncstorage

Answer №1

perform this task for me

  import AsyncStorage from '@react-native-async-storage/async-storage'; <--import 

    async function deleteItem(itemKey) {
      try {
        await AsyncStorage.removeItem(itemKey);
        console.log(`Successfully removed item with key: ${itemKey}`);
      } catch (error) {
        console.log(`Error removing item with key: ${itemKey}`, error);
      }
    }


-> deleteItem('itemKey');

Answer №2

Perhaps this solution could be beneficial to you

deleteData = async () => {
  try {
    await AsyncStorage.removeItem('@MyApp_key')<---- It can also be written within single quotes
  } catch(e) {
    // handle error
  }

  console.log('Process completed.')
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular issue: "anticipated to exit Angular zone, yet still found within"

I'm currently in the process of building a web application using Angular, and an error keeps appearing in the Chrome console: https://i.stack.imgur.com/sikuu.png Initially, I ignored the error as it didn't seem to impact the app's functiona ...

angulartypescript

What is the best way to display HTML file references in TypeScript files using VSCode when working with Angular templates?

Did you know that you have the option to enable specific settings in VSCode in order to view references within the editor? Take a look at the codes below: "typescript.implementationsCodeLens.enabled": true, "javascript.referencesCodeLens.enabled": true I ...

angulartypescriptvisual-studio-codereference

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

I'm working on an application where I need to highlight rows based on a count value using ngFor in Angular. After trying different approaches, I was only able to highlight the specific row based on my count. Can someone please assist me? Check out m ...

javascriptcssangulartypescriptionic3

Modifying the website favicon based on the URL address

I am currently working with a client who wants our web application to reflect their branding through the URL. They have requested that we change the favicon on the page to display their private label logo, as well as changing the title. However, I am strug ...

reactjstypescripttitlefavicon

Generate TypeScript type definitions for environment variables in my configuration file using code

Imagine I have a configuration file named .env.local: SOME_VAR="this is very secret" SOME_OTHER_VAR="this is not so secret, but needs to be different during tests" Is there a way to create a TypeScript type based on the keys in this fi ...

javascriptnode.jstypescriptenvironment-variables

Using checkboxes to filter a list within a ReactiveForm can result in a rendering issue

I have implemented a dynamic form that contains both regular input fields and checkboxes organized in a list. There is also an input field provided to filter the checkbox list. Surprisingly, I found out that when using the dot (.) character in the search f ...

angulartypescriptangular-reactive-formsangular-formsangular-pipe

The error message indicates a change in the binding value within the template, resulting in an

This is the structure of my component A : <nb-tab tabTitle="Photos" [badgeText]="centerPictures?.pictures?.length" badgePosition="top right" badgeStatus="info"> <app-center-pictures #centerPictures [center]="center"> ...

angulartypescriptcomponents

Avoid having the toast notification display multiple times

I've been working on implementing a toast notification for service worker updates in my project. However, I'm facing an issue where the toast notification pops up twice. It seems to be related to the useEffect hook, but I'm struggling to fig ...

javascriptreactjsreact-hooks

Connecting Ionic 3 with Android native code: A step-by-step guide

I just finished going through the tutorial on helpstack.io and was able to successfully set up the HelpStackExample with android native based on the instructions provided in the GitHub repository. The only issue is that my company project uses Ionic 3. H ...

androidangulartypescriptcordova-pluginsionic3

What kind of impact does the question mark at the conclusion of a function title make?

I came across the following TypeScript code snippet: class Foo { start?(): void {} } What caught my attention was the ? at the end of start. It appears to be making the function optional (but how can a function be optional and when would you need tha ...

typescript

Tips for updating props that are set by useEffect in a parent component using React Hooks

Just started learning React Hooks and encountering an issue: The App component sets up a map from localStorage using useEffect Then it passes this map to the child component, Hello After that: The child component copies this map into its own state to ...

reactjsreact-hooks

Experiencing a RepositoryNotFoundError in TypeORM, although I am confident that the repositories are properly registered

I am creating a new application using Next.js + TypeORM and encountering an issue with the integration. RepositoryNotFoundError: No repository for "User" was found. It seems like this entity is not registered in the current "default" connection? Althoug ...

javascripttypescriptnext.jstypeorm

What is the best way to trigger a function in React when a constant value is updated?

In my React application, I have 3 components. The parent component and two child components named EziSchedule and EziTransaction. Each component fetches its own data from an API. The data to display in the EziTransaction child component depends on the reco ...

reactjstypescriptreact-table

Is there a way to establish a data type using a specific key within the Record<K, T> structure in Typescript?

Imagine the scenario where an object type needs to be created and linked to a specific key specified in Record<Keys, Type>. Let's say there is a type called User, which can have one of three values - user, admin, or moderator. A new type called ...

typescripttypescript-generics

Utilizing Async Storage for Language Localization

Currently, I am utilizing two separate APIs for localization, both of which return JSON data. getEnLoc() //400kb getEsLoc() //400kb My plan is to call these APIs in App.ts during the app's initialization phase and store the retrieved JSON objects in ...

typescriptreact-nativelocalizationlocal-storageasyncstorage

Dealing with numerous errors from various asynchronous pipes in angular - a comprehensive guide

I am facing an issue with 2 mat-select elements in my component, both of which utilize the async pipe: <div class="flex-col"> <mat-label>Issue Desc </mat-label> <mat-form-field> < ...

angulartypescriptasynchronouspipeinterceptor

TypeScript has two variable types

I'm facing a challenge with a function parameter that can accept either a string or an array of strings. The issue arises when trying to pass this parameter to a toaster service, which only accepts the string type. As a result, when using join(' ...

typescripttypes

What is the reason behind the NgForOf directive in Angular not supporting union types?

Within my component, I have defined a property array as follows: array: number[] | string[] = ['1', '2']; In the template, I am using ngFor to iterate over the elements of this array: <div *ngFor="let element of array"> ...

javascriptangulartypescript

Error: Angular version 15 is unable to locate the module '@env/environment' or its corresponding type declarations

Recently, I developed an Angular 15 application with the environments folder located under src. Here is a snippet from my tsconfig.json file: "baseUrl": "./src", "paths": { "@app/*": [ "app/*" ], "r ...

angulartypescriptrelative-path

Unable to alter the pagination's selected page color to grey with material UI pagination components

Currently, I am implementing pagination using material UI. While I have successfully changed the page color to white, I am facing difficulty in changing the selected page color to grey. This issue arises because the background color is dark. import React, ...

javascriptreactjsreact-hooksmaterial-uipagination