javascript - React Native Delete 功能未按预期工作

Question

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

我正在关注本教程https://www.youtube.com/watch?v=qSRrxpdMpVc，我被困在 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 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;

Answer 1

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

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