Элемент удаления asyncstorage не работает

Мне удалось сохранить элементы в 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 работает только для всего массива.

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

2
0
4 141
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

Вы можете использовать filter вместо forEach / if.

ОБНОВИТЬ:

if (element === JSON.stringify(favi)) {
  await AsyncStorage.removeItem(element);
  console.log("they are the same");
  this.showProduct();
}
Ответ принят как подходящий

Это асинхронный вызов, поэтому используйте обещание, иначе он не будет ждать. Также 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);
      }
    });
   })
 }

Другие вопросы по теме