AsyncStorage удалить элемент не работает

Question

Мне удалось хранить элементы в asyncStorage и манипулировать ими, но сейчас я пытаюсь удалить определенный элемент нажатием кнопки.

Вот код:

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  FlatList,
  Button,
  AsyncStorage
} from "react-native";
import ajax from "./ajax.js";
import PropTypes from "prop-types";
import InspirationList from "./InspirationList";
import FavoriteItem from "./FavoriteItem";
import ProductItem from "./ProductItem";

class Favorites extends Component {
  state = {
    favorites: []
  };

  componentDidMount() {
    this.showProduct();
  }

  async showProduct() {
    let k = 0;
    AsyncStorage.getAllKeys().then(keys =>
      AsyncStorage.multiGet(keys).then(result => {
        let res = [];
        result.map(req => {
          req.forEach(element => {
            k++;
            if (element != null && k % 2 == 0) {
              res.push(JSON.parse(element));
            }
          });
          this.setState({ favorites: res });
        });
        console.log(this.state.favorites);
      })
    );
  }

  async removeItemValue(favi) {
    AsyncStorage.getAllKeys().then(keys =>
      AsyncStorage.multiGet(keys).then(result => {
        result.map(req => {
          req.forEach(element => {
            if (element === JSON.stringify(favi)) {
              AsyncStorage.removeItem(element);
              console.log("they are the same");
            }
          });
        });
      })
    );
  }

  //AsyncStorage.removeItem(element);

  render() {
    return (
      <ScrollView style="styles.fav">
        {this.state.favorites.map(fav => (
          <View key={fav.key}>
            <Text>{fav.nume}</Text>
            <Image
              style={{ width: "100%", height: 500 }}
              source={{ uri: fav.media[0] }}
            />

            <Button
              onPress={() => this.removeItemValue(fav)}
              title="capmare"
              color="#841584"
            />
          </View>
        ))}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  fav: {
    backgroundColor: "#999",
    flex: 1,
    width: "100%",
    paddingTop: 150
  }
});

export default Favorites;

Метод removeItemValue работает, только если я удаляю все элементы. Но когда я пытаюсь удалить определенный элемент, даже если он идет внутри оператора if и в журналах консоли, он не удаляет элемент.

Я перепробовал много методов удаления элементов, и я не понимаю, почему вызов метода removeItem работает только для всего массива.

Спасибо заранее за вашу помощь.

Answer 1

Это асинхронный вызов, поэтому используйте обещание, иначе он не будет ждать. Также AsyncStorage.removeItem выдаст ответ как функцию обратного вызова, поэтому измените, как показано ниже

async removeItemValue(favi) {
  AsyncStorage.getAllKeys().then(keys =>
     AsyncStorage.multiGet(keys).then(result => {
       result.map(req => {
         req.forEach(element => {
           if (element === JSON.stringify(favi)) {
             //calling the promise method written below
             return this.removeFromAsyncStorage(element)
             .then(result => {
               console.log(result);
             }).catch(err => {
               console.log(err);
             });
           }
         });
       });
     })
   );
 }



removeFromAsyncStorage(key) {
   return new Promise((resolve, reject) => {
     AsyncStorage.removeItem(key, (err, response) => {
      if(response) {
        resolve(response);
      } else {
        reject(err);
      }
    });
   })
 }

Answer 2

Вы не перезагружаете элементы (без изменения состояния) после удаления.

Просто позвони this.showProduct(); после удаления (это перезагрузит элементы, вызов setState заставит представление рендеринга / обновления).

Ты можешь использовать filter вместо каждого / если.

ОБНОВИТЬ:

if (element === JSON.stringify(favi)) {
  await AsyncStorage.removeItem(element);
  console.log("they are the same");
  this.showProduct();
}