どのようにクリックによって1 FlatList 1からすることができます私は、削除項目の状態を経由して

roz333:

私はFlatListに単純なリストを作成して、アイテムは名前の配列から得てきましたdata私は、各項目をクリックすることで、1でアイテムを1つずつ削除したいが、私の問題は、私はそれらすべての項目をクリックすると同時に削除されますということです。

私はこれをどのように修正することができますか?

これは私のアプリのように見えるものです:

ここでは、画像の説明を入力します。

そして、これはコードです:


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

}

giotskhada:

代わりにこれをやってみてください

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

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=32379&siteId=1
おすすめ