使用 FlatList 删除 AsyncStorage 中的项目答案

【问题标题】：Remove an item in AsyncStorage using FlatList使用 FlatList 删除 AsyncStorage 中的项目
【发布时间】：2020-12-20 17:08:02
【问题描述】：

对不起，经验不足，但是如何删除在平面列表中呈现的异步存储中的项目，例如：

这是我创建平面列表的组件

export default function Saved() {
  const [colors, setColors] = useState([]);

  useEffect(() => {

    async function getStorage() {
      const nomeStorage = await AsyncStorage.getAllKeys();
      if (nomeStorage != null) {
        setColors(nomeStorage);
      }
    }

    getStorage();

  }, [colors])

  return (
    <View style={styles.body}>

      <FlatList
        data={colors}
        keyExtractor={(item) => item}
        renderItem={({ item }) => <Saveds data={item} />}
      />

    </View>
  );
}

这是我的 FlatList 渲染组件

export default function Saveds(props) {
  return (
    <View>

      <View style={styles.Boxes}>
        <Box color={props.data}>
          <Badge
            badgeStyle={styles.badge}
            value={<Text style={styles.color}>{props.data}</Text>}
          />
        </Box>

        <TouchableOpacity style={styles.btn}>
          <Icon name={'trash-outline'} color={'#FFF'} size={30} />
        </TouchableOpacity>
      </View>

    </View>
  );
}

当我单击 TouchableOpacity 时，我需要一种方法来删除 AsyncStorage 中的选定数据。

我的 AsyncStorage 中的名称与值相同，因此我可以删除 AsyncStorage 获取我的 props.data 的值。

谁能帮帮我？

【问题讨论】：

标签： javascript react-native react-native-flatlist asyncstorage

【解决方案1】：

从您的异步存储中删除应该像调用 AsyncStorage.removeItem(key) 一样简单

我在前段时间做的一个应用程序中有一些类似的功能，我将删除函数调用附加到 touchableOpacity 的 onLongPress 属性：

<TouchableOpacity
  onPress={() => navigation.navigate('UserScreen', data)}
  onLongPress={handleLongPress}>
  <View style={styles.container}>
    // ...
  </View>
</TouchableOpacity>

在组件的前面，我定义了一个处理删除的函数：

const handleLongPress = async () => {
  // In your instance, you should be OK to replace data.key with props.data
  await AsyncStorage.removeItem(data.key);

  /* I then had another function that was passed in as a prop
  to update another component when the deletion had taken place */
  await onChange();
};

【讨论】：