如何从 FlatList 的存储中删除项目？

Question

我的存储中有字符串，我想创建一个删除按钮来删除存储中的密钥。我的问题是我在一个 flatList 中，我无法让它工作。

async removeItemValue(key) {
try {
  await AsyncStorage.removeItem(key);
  return true;
}
catch(exception) {
  return false;
}

}

render() {
return (
<View style={styles.container}>
  <View>
    <FlatList
      data={this.state.imgData}
      renderItem={({item}) => 
        <View style={{flex: 1, alignItems: "center", justifyContent: "center", marginBottom: 20, borderBottomColor:"white", borderBottomWidth:1}}>
          <Text>{item.date}</Text>
          <Image style={{width: 300, height: 350}} source={{ uri: item.key }} />
          <TouchableOpacity style={styles.menuButton} onPress={this.removeItemValue(item.key)}>
            <Text>Delete</Text>
          </TouchableOpacity>
        </View> 
      }
    />
  </View>
</View>
);

} }

您能否也向我解释一下为什么在加载此页面时调用 touchableOpacity 中的 OnPress 方法，而不是仅在单击按钮时调用？

Answer 1

关于onPress，您在编译时调用函数。 onPress={this.removeItemValue(item.key)}。你必须在那里发送回调，如下所示：

onPress={() => {console.log("pressed")}}

你的情况 onPress={() => {this.removeItemValue(item.key)}}

Answer 2

将您的渲染方法替换为此

render() {
return (
<View style={styles.container}>
  <View>
    <FlatList
      data={this.state.imgData}
      renderItem={({item, index}) => 
        <View style={{flex: 1, alignItems: "center", justifyContent: "center", marginBottom: 20, borderBottomColor:"white", borderBottomWidth:1}}>
          <Text>{item.date}</Text>
          <Image style={{width: 300, height: 350}} source={{ uri: item.key }} />
          <TouchableOpacity style={styles.menuButton} onPress={() => this.removeItemValue(item.key)}>
            <Text>Delete</Text>
          </TouchableOpacity>
        </View> 
      }
    />
  </View>
</View>
);

映射时需要使用箭头函数回调

如果您想从数组对象中删除任何值，请在 onPress 按钮中传递 index，这样您就可以使用索引轻松删除任何值。

确保从存储中删除值后请更新您的状态因为你在 flatlist 中有渲染状态并且你从存储中删除了。

Answer 3

如果您将发送的道具定义为 （箭头）函数:

，它应该可以工作

onPress={() => this.removeItemValue(item.key)}

如果你像这样发送道具...

 onPress={this.removeItemValue(item.key)}

...那么您不再发送函数，而是发送函数 this.removeItemValue(...) returns 的 value。该函数在将其传递给组件之前执行。

如何从 FlatList 的存储中删除项目？

How to delete an item from storage in FlatList?

react-native

asyncstorage

expo