Блог

Здравствуйте, итак, я учусь на React Native, поэтому я практикуюсь с простым приложением, подобным Todo, я хочу реализовать метод удаления, чтобы для каждого добавленного элемента у него был идентификатор, который я затем попытался использовать keyExtractor, чтобы затем передать ключ каждого добавленного элемента, но, похоже, все элементы имеют одинаковый идентификатор, потому что, когда я нажимаю на них для удаления, все записи затем удаляются.

Я не знаю, является ли ошибка в моей логике кода, могу ли я, пожалуйста, получить помощь:

Код ниже App.js

 import React, { useState } from "react";
import { StyleSheet, View, FlatList } from "react-native";
import ListItems from "./Components/ListItems";
import InputField from "./Components/InputField";

export default function App() {
  const [GoalListItem, setMyGoals] = useState([]);

  const addGoal = (goals) => {
    setMyGoals((currentGoals) => [
      ...GoalListItem,
      { id: Math.random().toString(), value: goals },
    ]);
  };

  const removeGoalHandler = (goalID) => {
    setMyGoals((currentGoals) => {
      return currentGoals.filter((goal) => {
        goal.id !== goalID;
      });
    });
  };
  return (
    <View style={styles.screen}>
      <InputField onAddGoal={addGoal} />
      <FlatList
        data={GoalListItem}
        keyExtractor={(item, index) => item.id}
        renderItem={(itemData) => (
          <ListItems
            id={itemData.item.id}
            removeGoal={removeGoalHandler}
            item={itemData.item.value}
          />
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    padding: 50,
  },
});
  

Приведенный ниже код ListItems.js

 import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";

const ListItems = ({ item, removeGoal, id }) => {
  return (
    <TouchableOpacity onPress={removeGoal.bind(this, id)}>
      <View style={styles.goalText}>
        <Text>{item}</Text>
      </View>
    </TouchableOpacity>
  );
  

};

 const styles = StyleSheet.create({
  goalText: {
    padding: 10,
    backgroundColor: "#ccc",
    borderColor: "black",
    borderWidth: 1,
    marginVertical: 10,
  },
});

export default ListItems;
  

GoalListItem выглядит следующим образом

 GoalListItem = [{id:21, value:'Cook pasta'}, {id:233, value:'Make Coffee'}]