如何从平面列表的存储中删除项目

Question

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

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>
);

}}

您能否也向我解释一下为什么在加载此页面时调用可触摸不透明度中的 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，以便您可以使用索引轻松删除任何值。

• 确保从存储中删除值后，请更新您的状态因为您在平面列表中具有呈现状态，并且从存储中删除。

Answer 3

如果您将发送的道具定义为(箭头(函数，它应该可以工作：

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

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

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

。那么你不再发送函数，而是发送函数this.removeItemValue(...(返回的值。该函数在将其传递给组件之前执行。