Javascript 当我想删除列表中的一项时，所有内容都会被删除

我的应用程序的主体。 ... 从“React”导入React，{useState}； 进口{ 样式表， 文本， 看法 按钮 文本输入， 平面列表， }从“反应本族语”； 从“/components/GoalItem”导入GoalItem； 从“/components/GoalInput”导入GoalInput

导出默认函数App（）{
const[lifeGoals，setLifeGoals]=useState（[]）；
const addGoalHandler=（goalTitle）=>{
setLifeGoals（（当前目标）=>[
…当前目标，
{key:Math.random（）.toString（），value:goalTitle}，
]);
};
const removeGoalHandler=（goalId）=>{
setLifeGoals（（当前目标）=>{
返回currentGoals.filter（（goal）=>goal.id！==goalId）；
});
};
返回(
项目id}
数据={lifeGoals}
renderItem={（itemData）=>(
)}
/>
);
}
const styles=StyleSheet.create({
屏幕：{
填充：50，
},
});
...
这是我的目标，里面有我的名单
...
从“React”导入React；
从“react native”导入{样式表、视图、文本、TouchableOpacity}；
常量GoalItem=（道具）=>{
返回(
{props.title}
);
};
const styles=StyleSheet.create({
列表项：{
填充：10，
玛吉：10，
背景颜色：“CCFFFF”，
边界半径：15，
},
});
导出默认GoalItem；
...
这是我的GoalInput，它处理用户输入并附加到列表中
...
从“React”导入React，{useState}；
从“react native”导入{视图、文本输入、按钮、样式表、样式表}；
常量GoalInput=（道具）=>{
const[enteredGoal，setEnteredGoal]=useState（“”）；
常量InputGoalHandler=（输入文本）=>{
setEnteredGoal（enteredText）；
};
返回(
);
};
const styles=StyleSheet.create({
输入框：{
边框颜色：“黑色”，
边框宽度：0，
填充：10，
宽度：“80%”，
},
输入容器：{
flexDirection:“行”，
辩护内容：“间隔空间”，
对齐项目：“中心”，
},
});
导出默认GoalInput；

。。。 我相信关键可能是这个问题，但我真的不确定。应该发生的是，当你点击列表中的一个项目时，它应该被删除，但它却在删除我的整个列表。如何解决此问题？

const removeGoalHandler=（goalId）=>{
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;

setLifeGoals（lifegals.filter（（m）=>m.id！==goalId.id））；
};
项目id}
数据={lifeGoals}
renderItem={（itemData）=>(
)}
/>
const GoalItem=（{onDelete，title}）=>{
返回(
{title}
);
};

---

试试这个

试试拼接而不是过滤器看看。筛选器仅返回与大小写匹配的元素。在上面的代码中，您正在设置筛选产品，以防给您所选（例如已删除）项。您的GoalItems只是您希望在平面列表中使用的组件，对吗？它似乎不起作用，因为它表示缺少return语句

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;

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