如何将item.id传递到滑动按钮

Question

我想将当前项的id传递给函数以删除它。

import React, { useState, useContext, useLayoutEffect } from "react";
import { View, Text, StyleSheet, TextInput, Image, ActivityIndicator } from "react-native";
import { FlatList, TouchableOpacity, Directions } from "react-native-gesture-handler";
import { AntDesign, Ionicons, Feather } from '@expo/vector-icons';
import firebase from "../firebase"
import { AuthContext } from "../AuthNavigator";
import Swipeout from "react-native-swipeout";
console.disableYellowBox = true;
export default function Ingredients() {

//In this Function i want to get the id from the Item to pass it into the function to delete the item

const swipeButtons = [
{
text: <AntDesign name="delete" size={24} color="black" />,
backgroundColor: '#AD1457',
onPress: () => handleRemoveItem(index)
}
]

const renderItem = ({ item }) => (
< Swipeout
autoClose
right={swipeButtons}
backgroundColor="transparent"
>
<View style={styles.item} >
<View style={{ flexDirection: "row", marginTop: 5 }} >
<Image style={styles.image} source={{ uri: item.image }}></Image>
<Text style={{ color: '#fff', marginTop: 5, marginLeft: 50, fontSize: 18 }}>Menge</Text>
<Text style={{ color: '#fff', marginTop: 35, marginLeft: -30, fontSize: 18 }}>{item.amount}</Text>
<Text style={{ color: '#fff', marginTop: 10, marginLeft: 80, fontSize: 22 }}>{item.label}</Text>
</View>
</View >
</Swipeout >
)

const [searchValue, setSearchValue] = useState('');
return (
<View style={styles.container}>
<View style={styles.searchBar}>
<View style={{ alignSelf: "flex-end", marginTop: 8, marginRight: 30 }}>
<TouchableOpacity onPress={() => fetchIngredient(searchValue)}>
{!isLoading && <Ionicons name="md-add" size={32} color="#fff" />}
</TouchableOpacity>
{isLoading && <ActivityIndicator style={styles.loading} color='#AD1457' />}
</View>
{!isLoading && <TextInput style={{
alignSelf: "flex-start", marginLeft: 25, marginTop: -30, fontSize: 20, color: '#fff', width: 200
}} placeholder="Suche" placeholderTextColor='#fff' value={searchValue} onChangeText={(searchValue) => setSearchValue(searchValue)}></TextInput>}
</View>
<FlatList
data={userIngredientsList}
renderItem={renderItem}
keyExtractor={(item) => item.id}>
</FlatList>
</View >
);
}

我需要将它传递到swipeButtons函数中，将它传递给handleRemoveItem函数并从列表中删除该项。如果你能给我一些好主意，而不仅仅是简短的答案，那就太好了。我是新手，不知道如何解决。

Answer 1

不要直接使用数组，而是将其用作函数并传递Id或所需的任何属性。

const swipeButtons =(id)=> [
{
text: <AntDesign name="delete" size={24} color="black" />,
backgroundColor: '#AD1457',
onPress: () => handleRemoveItem(id)
}
]
const renderItem = ({ item }) => {
const buttons = swipeButtons(item.id);
return (
< Swipeout
autoClose
right={buttons}
backgroundColor="transparent"
>
<View style={styles.item} >
<View style={{ flexDirection: "row", marginTop: 5 }} >
<Image style={styles.image} source={{ uri: item.image }}></Image>
<Text style={{ color: '#fff', marginTop: 5, marginLeft: 50, fontSize: 18 }}>Menge</Text>
<Text style={{ color: '#fff', marginTop: 35, marginLeft: -30, fontSize: 18 }}>{item.amount}</Text>
<Text style={{ color: '#fff', marginTop: 10, marginLeft: 80, fontSize: 22 }}>{item.label}</Text>
</View>
</View >
</Swipeout >
);
}

Answer 2

< Swipeout
autoClose
right={swipeButtons(index)}
backgroundColor="transparent"
>
const swipeButtons = ({index}) =
{
text: <AntDesign name="delete" size={24} color="black" />,
backgroundColor: '#AD1457',
onPress: () => handleRemoveItem(index)
}

我不熟悉功能组件，但这种方式必须适用于