React Native中点击删除图标移除FlatList数据的实现方案

1. 将静态数据转为React状态 #

你当前的Data是静态常量，组件不会监听它的变化。必须用useState把它转为状态变量，这样修改数据时才能触发组件重渲染，更新FlatList的显示。

2. 修复删除逻辑 #

之前的Delete函数里setInfo未定义，且没有处理数据删除的逻辑。需要让删除函数接收要移除项的ID，通过过滤数组的方式移除对应项，再更新状态。

3. 渲染列表项时使用item数据 #

你在renderItem里直接引用route.params，这样即使数据更新，显示的还是最初传递的参数。应该改为使用item对象里的属性，保证显示内容和状态数据同步。

4. 修正组件导出错误 #

你的组件定义为Three，但最后导出的是Home，这会导致组件无法正常使用，需要修正导出语句。

修改后的完整代码：

import React, { useState } from 'react';
import { View, Text, SafeAreaView, FlatList, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'; // 假设你使用的是这个图标库

function Three({ navigation, route }) {
    // 用useState初始化状态，从route.params获取初始数据
    const [data, setData] = useState([
        {
            id: route.params.paramKey,
            name: route.params.paramKey1,
            note: route.params.paramKey2,
            desc: route.params.paramKey3,
        }
    ]);

    // 删除函数：接收item的id，过滤数组移除对应项
    const handleDelete = (itemId) => {
        setData(prevData => prevData.filter(item => item.id !== itemId));
    };

    const renderItem = ({ item }) => (
        <View style={{ backgroundColor: 'yellow', height: 160, width: 350, borderRadius: 15, paddingLeft: 10, marginTop: 30, marginLeft: 10 }}>
            <Text style={{ color: 'black', fontSize: 20 }}>selected Date:
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{item.id}</Text>
            </Text>
            <Text style={{ color: 'black', fontSize: 20 }}>
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{item.name}</Text>
            </Text>
            <Text style={{ color: 'black', fontSize: 20 }}>Note Title:
                <Text style={{ color: 'green', fontWeight: 'bold' }}> {item.note}</Text>
            </Text>
            <Text style={{ color: 'black', fontSize: 20 }}>Note Description:
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{item.desc}</Text>
            </Text>
            <TouchableOpacity
                onPress={() => handleDelete(item.id)}
                style={{ marginLeft: 310, marginTop: 15 }}
            >
                <Icon name="trash" size={30} color="red" />
            </TouchableOpacity>
        </View>
    );

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <FlatList
                data={data}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
        </SafeAreaView>
    );
}

export default Three; // 修正导出的组件名称

关键说明 #

• 用useState管理数据状态，确保数据变化时组件能重新渲染。
• handleDelete函数通过filter方法创建新数组，移除对应ID的项，遵循React状态不可变的原则。
• renderItem中使用item的属性，保证显示内容和当前状态数据一致。
• 修正导出语句，确保组件能被正确引用和使用。

内容的提问来源于stack exchange，提问作者user19534405