當我想刪除列表中的一項時，所有內容都會被刪除 Expo, React Native

Question

This is my app.js

我的應用程序的主體。 ... import React, { useState } from "react"; import { StyleSheet, Text, View, Button, TextInput, FlatList, } from "react-native"; 從“./components/GoalItem”導入 GoalItem； 從“./components/GoalInput”導入目標輸入；

export default function App() {
  const [lifeGoals, setLifeGoals] = useState([]);

  const addGoalHandler = (goalTitle) => {
    setLifeGoals((currentGoals) => [
      ...currentGoals,
      { key: Math.random().toString(), value: goalTitle },
    ]);
  };

  const removeGoalHandler = (goalId) => {
    setLifeGoals((currentGoals) => {
      return currentGoals.filter((goal) => goal.id !== goalId);
    });
  };
  return (
    <View style={styles.Screen}>
      <GoalInput onAddGoal={addGoalHandler} />
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={lifeGoals}
        renderItem={(itemData) => (
          <GoalItem
            id={itemData.item.id}
            onDelete={removeGoalHandler}
            title={itemData.item.value}
          />
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  Screen: {
    padding: 50,
  },
});
...
This is my GoalItem which houses my list
...
import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";

const GoalItem = (props) => {
  return (
    <TouchableOpacity onPress={props.onDelete.bind(this, props.id)}>
      <View style={styles.ListItem}>
        <Text>{props.title}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  ListItem: {
    padding: 10,
    marginVertical: 10,
    backgroundColor: "#CCFFFF",
    borderRadius: 15,
  },
});

export default GoalItem;
...
This is my GoalInput which handles the userinput and appending onto the list
...
import React, { useState } from "react";
import { View, TextInput, Button, Stylesheet, StyleSheet } from "react-native";

const GoalInput = (props) => {
  const [enteredGoal, setEnteredGoal] = useState("");

  const InputGoalHandler = (enteredText) => {
    setEnteredGoal(enteredText);
  };

  return (
    <View style={styles.inputContainer}>
      <TextInput
        placeholder="Enter Task Here"
        style={styles.InputBox}
        onChangeText={InputGoalHandler}
        value={enteredGoal}
      />
      <Button title="add" onPress={props.onAddGoal.bind(this, enteredGoal)} />
    </View>
  );
};

const styles = StyleSheet.create({
  InputBox: {
    borderColor: "black",
    borderWidth: 0,
    padding: 10,
    width: "80%",
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
});

export default GoalInput;

...我相信關鍵可能是問題，但我真的不確定。 應該發生的是，當您單擊列表中的一個項目時，它應該被刪除，但是它刪除了我的整個列表。 我該如何解決這個問題？

Answer 1

const removeGoalHandler = (goalId) => {
    setLifeGoals(lifeGoals.filter((m) => m.id !== goalId.id));
  };

  <FlatList
        keyExtractor={(item) => item.id}
        data={lifeGoals}
        renderItem={(itemData) => (
          <GoalItem
            onDelete={removeGoalHandler}
            title={itemData.item.value}
          />
        )}
      />

const GoalItem = ({onDelete, title}) => {
  return (
    <TouchableOpacity onPress={onDelete}>
      <View style={styles.ListItem}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  );
};

嘗試這個