获取FLatList keyExtractor的密钥以使网络调用反应为本机

Question

我想进行网络调用，从数组中删除一个项。终点是希望我将标题作为要在数组中删除的项的ID传递。

数组在数据库中的形式如下：

payload: {
title: string,
description: string 
}

以下是我到目前为止的实现。

import React from "react";
import {
FlatList,
View,
Text,
StyleSheet,
ActivityIndicator,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import {
widthPercentageToDP as WP,
heightPercentageToDP as HP,
} from "react-native-responsive-screen";
import dimensions from "../../constants/dimensions";
import { fetchTodo, useDeleteTodo } from "../../server";
import showToast from "../../components/toast";
export default function TodoList({navigation}) {
const {data, isLoading } = fetchTodo()
console.log(data?.data)
const {mutateAsync} = useDeleteTodo()
const handleDelete = async (title:string) => {
try {
const response = await mutateAsync(title)
showToast(response.data.message);
// setClearTextInput("");
} catch (error) {
showToast(error);
}
};
return (
<View style={styles.container}>
<FlatList
contentContainerStyle={styles.contentContainer}
data={data?.data.payload}
keyExtractor={(ITodo) => ITodo.title}
renderItem={(renderTodo) => {
return (
<View style={styles.itemContainer}>
<Text style={styles.item}>{renderTodo.item.title}</Text>
<View style={styles.actionStyle}>
<Feather name="edit" size={WP(6)} color="blue"
onPress={()=>
navigation.navigate('EditTodoScreen')
}
/>
<MaterialIcons
name="delete"
size={WP(6)}
color="red"
onPress={() => {
handleDelete()
}}
/>
</View>
</View>
);
}}
ListEmptyComponent={() =>
isLoading ? (
<ActivityIndicator color="red" />
) : (
<Text style={{ marginTop: HP(8), fontSize: WP(7) }}>
List is empty
</Text>
)
}
/>
</View>
);
}

我已经将标题设置为FlatList keyExtractor中的键，并且我想将单击的项目的标题传递给handleDelete((。它试图通过"；renderTodo"；但我没能从中获得冠军。我还是个反应迟钝的新手。请问我怎样才能做到这一点？

Answer 1

我建议你这样做(这看起来更干净，更容易理解。

keyExtractor={({ title }) => title}
renderItem={({ item }) => {
return (
<View style={styles.itemContainer}>
<Text style={styles.item}>{item.title}</Text>
<View style={styles.actionStyle}>
<Feather name="edit" size={WP(6)} color="blue"
onPress={()=>
navigation.navigate('EditTodoScreen')
}
/>
<MaterialIcons
name="delete"
size={WP(6)}
color="red"
onPress={() => {
handleDelete(item.title)
}}
/>
</View>
</View>
);
}}