获取 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”传递给它，但我无法从中获得标题。我还是 react-native 的新手。请问我怎样才能做到这一点？

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

获取 FLatList keyExtractor 的密钥使网络调用响应原生

Getting the key of FLatList keyExtractor to make network call react native

reactjs

react-native

react-native-flatlist