我如何通过单击状态从 FlatList 中一个一个地删除项目

Question

我已经在 FlatList 中创建了一个简单列表，项目已从名为 data 的数组中获取。我想通过单击每个项目来一个接一个地删除项目，但我的问题是，当我单击一个项目时，所有项目都会同时被删除。

我该如何解决这个问题？

这是我的应用的样子：

这是代码：


const FoodList = () => {




    const data = [

        { text: 'test1', backgroundColor: 'teal' },
        { text: 'test2', backgroundColor: 'teal' },
        { text: 'test3', backgroundColor: 'teal' },
        { text: 'test4', backgroundColor: 'teal' },
        { text: 'test5', backgroundColor: 'teal' },
        { text: 'test6', backgroundColor: 'teal' },
        { text: 'test7', backgroundColor: 'teal' },
        { text: 'test8', backgroundColor: 'teal' },
        { text: 'test9', backgroundColor: 'teal' },
        { text: 'test10', backgroundColor: 'teal' },
        { text: 'test11', backgroundColor: 'teal' },


    ]




    let [itemState, setitemState] = useState(data);




    return (


        <View style={styles.container}>
            <FlatList
                data={itemState}
                keyExtractor={(item, index) => index}
                renderItem={({ item, index }) => (
                    <TouchableOpacity
                        style={[
                            { flexDirection: 'row' }, { width: '100%' }, { alignItems: 'center' }, { flex: 1 }, { justifyContent: 'space-between' },
                            { backgroundColor: item.backgroundColor }, { marginBottom: 10 }

                        ]}
                        activeOpacity={0.7}
                        onPress={() => {
                            let removeItem = itemState.map((_item, _Index) => _Index !== index);
                            setitemState(itemState = removeItem);

                        }}

                    >


                        <Text style={{ fontSize: 30, color: 'white' }} >{item.text}{item.name}</Text>


                        <Icon type='FontAwesome5' name='trash-alt' style={{ color: 'white' }} />
                    </TouchableOpacity>
                )}





            />



        </View>
    )

}

Answer 1

尝试这样做

onPress={() => {
   setitemState(prevItemState => prevItemState.filter((_item, _Index) => _Index !== index));
}}

Answer 2

问题出在您用于删除项目的函数上。

The map() method creates a new array with the results of calling a function for every array element.

The filter() method creates an array filled with all array elements that pass a test.

所以当你运行 map((_item, _Index) => _Index !== index) 你的 removeItem 将是：

 [false, false, false, true, false, false, false, false, false, false, false]

一堆布尔值没有得到明显的渲染:)

为了删除项目使用 filter((_item, _Index) => _Index !== index)

我如何通过单击状态从 FlatList 中一个一个地删除项目

How can i delete items from FlatList one by one by clicking via state

javascript

reactjs

react-native

react-native-flatlist

react-state