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

这是一个异步调用，因此请使用promise否则它不会等待，而且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将强制渲染/刷新视图）。

对于每个/ if，您可以使用filter代替。

更新：

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

AsyncStorage删除项不起作用

2 个答案: