Как удалить элемент из хранилища в FlatList? - PullRequest
Новая
       67

Как удалить элемент из хранилища в FlatList?

0 голосов
/ 07 февраля 2019

В моем хранилище есть строки, и я хотел бы создать кнопку удаления, которая удаляла бы ключ из моего хранилища.Моя проблема в том, что я нахожусь в плоском списке и мне не удается заставить его работать. 

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 в touchableOpacity вызывается при загрузке этой страницы, а не только при нажатии кнопки?

Ответы [ 3 ]

0 голосов
/ 07 февраля 2019

замените ваш метод рендеринга на этот 

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

, в то время как при отображении вам необходимо выполнить обратный вызов, используя функцию стрелки

, если вы хотите удалить любое значение из массива, передаваемого index в onPressКнопка, чтобы вы могли легко удалить любое значение, используя индекс.

  • . Убедитесь, что после удаления значения из хранилища обновите свое состояние, поскольку у вас есть состояние рендеринга в плоском списке, и вы удаляете из хранилища.
0 голосов
/ 07 февраля 2019

Это должно сработать, если вы определите реквизит, который вы отправляете, как функцию (стрелка) : 

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

Если вы отправите реквизит вот так ... 

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

... тогда вы больше не отправляете функцию, а значение , которое возвращает функция this.removeItemValue (...).Функция выполняется перед передачей ее компоненту.

0 голосов
/ 07 февраля 2019

относительно onPress, вы вызываете функцию во время компиляции.onPress={this.removeItemValue(item.key)}.Вы должны отправить туда ответный звонок, например:

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

В вашем случае onPress={() => {this.removeItemValue(item.key)}}

...