Javascript React本机删除功能未按预期工作

预期的功能是，它只会删除单击的一个目标，但出于某种奇怪的原因，它决定按一下删除列出的所有目标

我正在学习这个教程，我被困在2:44:45左右。如果其他任何人已经完成了本教程，或者能够看到我的问题，将非常感谢您的解释。：）

节目

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
  ScrollView,
  FlatList
} from "react-native";

import GoalItem from "./components/GoalItem";
import GoalInput from "./components/GoalInput";

export default function App() {
  const [courseGoals, setCourseGoals] = useState([]);

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

  const removeGoalHander = goalId => {
    setCourseGoals(currentGoals => {
      return currentGoals.filter((goal) => goal.id !== goalId);
    });
  };

  return (
    <View style={styles.screen}>
      <GoalInput onAddGoal={addGoalHandler} />
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={courseGoals}
        renderItem={itemData => (
          <GoalItem
            id={itemData.item.id}
            onDelete={removeGoalHander}
            title={itemData.item.value}
          />
        )}
      ></FlatList>
    </View>
  );
}

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

import React，{useState}来自“React”；
进口{
样式表，
文本，
看法
按钮
文本输入，
滚动视图，
扁平列表
}从“反应本族语”；
从“/components/GoalItem”导入GoalItem；
从“/components/GoalInput”导入GoalInput；
导出默认函数App（）{
const[courseGoals，setCourseGoals]=useState（[]）；
const addGoalHandler=goalTitle=>{
setCourseGoals（当前目标=>[
…当前目标，
{key:Math.random（）.toString（），value:goalTitle}
]);
};
const removeGoalHander=goalId=>{
setCourseGoals（当前目标=>{
返回currentGoals.filter（（goal）=>goal.id！==goalId）；
});
};
返回(
项目id}
数据={courseGoals}
renderItem={itemData=>(
)}
>
);
}
const styles=StyleSheet.create({
屏幕：{
填充：80
}
});

作用

import React from "react";
import { View, Text, StyleSheet, 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,
    backgroundColor: "lightgrey",
    borderColor: "grey",
    borderRadius: 5,
    borderWidth: 1,
    marginVertical: 10
  }
});

export default GoalItem;

从“React”导入React；
从“react native”导入{视图、文本、样式表、TouchableOpacity}；
const GoalItem=props=>{
返回(
{props.title}
);
};
const styles=StyleSheet.create({
列表项：{
填充：10，
背景颜色：“浅灰色”，
边框颜色：“灰色”，
边界半径：5，
边框宽度：1，
利润率：10
}
});
导出默认GoalItem；

更新状态时，必须传递新数组，以便组件可以检测更改并更新视图

const removeGoalHander = goalId => {
    setCourseGoals(currentGoals => {
      const newGoals = currentGoals.filter((goal) => goal.id !== goalId);
      return [...newGoals];
    });
  };

---

我发现是行

{key:Math.random（）.toString（），value:goalTitle}

需要更改为

{id:Math.random（）.toString（），value:goalTitle}