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