在 react native 中使用 filter 方法从 flatList 中删除项目时遇到问题

Question

我在 React Native 中从我的平面列表中删除一个项目时遇到问题。 我是用filter方法过滤掉没有用户输入的ID的列表要删除，但是好像不行。 我不知道我在这里做错了什么。 当我点击删除按钮时，列表没有更新。

这是我到目前为止：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, TouchableHighlight, Button, Alert, Modal, TextInput, ScrollView } from 'react-native';

const musiciansArray = [
  { id: 1, key: 'A', value: 'Pink Floyd', members: 4, songs: 165, albums: 13 },
  { id: 2, key: 'B', value: 'Deep Purple', members: 5, songs: 70, albums: 7 },
  { id: 3, key: 'C', value: 'AC/DC', members: 5, songs: 80, albums: 12 },
  { id: 4, key: 'D', value: 'The Doors', members: 4, songs: 100, albums:11 },
  { id: 5, key: 'E', value: 'Led Zeppelin', members: 4, songs: 95, albums: 5 },
  { id: 6, key: 'F', value: 'Tame Impala', members: 5, songs: 25, albums:4 },
  { id: 7, key: 'G', value: 'RHCP', members: 4, songs: 55, albums: 6 },
];

const App = () => {
  const [listItems, setListItems] = useState(musiciansArray);

  const [idDeleteInput, setIdDeleteInput] = useState();

  const [exampleArray, setExampleArray] = useState(musiciansArray);

  useEffect(() => {
    setListItems(exampleArray);
  }, [exampleArray]);


  const alertAdd = () => {
    var newArray = [...exampleArray, { id: exampleArray.length + 1, key: keyInput, value: itemInput, members: memInput, songs: songInput, albums: albumInput }];
    setExampleArray(newArray);
  };

  const delItem = (idDeleteInput) => {
    const filteredArray = exampleArray.filter(item => item.id !== idDeleteInput);
    setExampleArray(filteredArray);
  }
 
  return (
    <ScrollView style={styles.container}>
      <View>
        <View>
          <Text style={styles.text1}>Bands</Text>
          <FlatList
            data={listItems}
            ItemSeparatorComponent={ItemSeparatorView}
            renderItem={ItemView}
            keyExtractor={item => item.id}/>
        </View>
       
        <View>
          <Text style={styles.text3}>Delete</Text>
          <Text style={styles.text4}>Id to delete:</Text>
          <UselessTextInput
            multiline
            numberOfLines={4}
            value={idDeleteInput}
            onChangeText={delID => setIdDeleteInput(delID)}
          />
        </View>
        <View style={styles.fixToText2}>
          <TouchableOpacity onPress={delItem}
            style={styles.button3}>
            <Text style={styles.textButton}>Press To Del</Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
};

Answer 1

问题

您编写它时假设单击/按下事件将作为要删除的元素的 id 传递。

const delItem = (idDeleteInput) => { // <-- event object!
  const filteredArray = exampleArray.filter(item => item.id !== idDeleteInput);
  setExampleArray(filteredArray);
}

...

<TouchableOpacity
  onPress={delItem}
  style={styles.button3}
>
  <Text style={styles.textButton}>Press To Del</Text>
</TouchableOpacity>

当您实际将要删除的 id 存储在 state 中时。

<Text style={styles.text4}>Id to delete:</Text>
<UselessTextInput
  multiline
  numberOfLines={4}
  value={idDeleteInput}
  onChangeText={delID => setIdDeleteInput(delID)}
/>

解决方案

使用状态的 id 进行过滤。

const delItem = () => {
  const filteredArray = exampleArray.filter(item => item.id !== idDeleteInput);
  setExampleArray(filteredArray);
}