Expo React Native删除列表项时全部被删除问题求助

我看了你的代码，问题根源在于数据字段不匹配，导致删除逻辑完全失效，直接清空了整个列表。下面给你一步步拆解问题和解决方案：

核心问题分析 #

• 添加目标时的字段错误：在addGoalHandler里，你给新目标对象添加的是key字段，但后续所有操作（删除过滤、FlatList的key提取、传给GoalItem的id）都在使用id字段。这就导致所有目标的id都是undefined，当你调用删除时，currentGoals.filter((goal) => goal.id !== goalId)里的goal.id和goalId都是undefined，过滤条件变成undefined !== undefined，结果就是所有项都被过滤掉，列表被清空。
• 额外的小问题：GoalItem里的bind(this)完全没必要（React函数组件里没有this）；GoalInput里用bind(this, enteredGoal)传递参数，容易导致不必要的重渲染，用箭头函数包裹更稳妥。

修正后的代码 #

主应用文件app.js #

import React, { useState } from "react";
import { StyleSheet, Text, View, Button, TextInput, FlatList } from "react-native";
import GoalItem from "./components/GoalItem";
import GoalInput from "./components/GoalInput";

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

  const addGoalHandler = (goalTitle) => {
    // 统一使用id字段，保持数据一致性
    setLifeGoals((currentGoals) => [
      ...currentGoals,
      { id: Math.random().toString(), value: goalTitle },
    ]);
  };

  const removeGoalHandler = (goalId) => {
    setLifeGoals((currentGoals) => {
      // 现在id字段存在，过滤逻辑正常生效
      return currentGoals.filter((goal) => goal.id !== goalId);
    });
  };

  return (
    <View style={styles.Screen}>
      <GoalInput onAddGoal={addGoalHandler} />
      <FlatList
        keyExtractor={(item) => item.id} // 匹配数据里的id字段
        data={lifeGoals}
        renderItem={(itemData) => (
          <GoalItem
            id={itemData.item.id}
            onDelete={removeGoalHandler}
            title={itemData.item.value}
          />
        )}
      />
    </View>
  );
}

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

GoalItem列表项组件 #

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

const GoalItem = (props) => {
  // 用箭头函数传递id，逻辑更清晰，避免bind的冗余
  const handleDelete = () => {
    props.onDelete(props.id);
  };

  return (
    <TouchableOpacity onPress={handleDelete}>
      <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;

GoalInput输入组件 #

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

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

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

  // 用箭头函数包裹，确保传递最新的输入值，同时添加清空输入框的逻辑提升体验
  const handleAddGoal = () => {
    props.onAddGoal(enteredGoal);
    setEnteredGoal("");
  };

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

const styles = StyleSheet.create({
  InputBox: {
    borderColor: "black",
    borderWidth: 1, // 恢复边框，让输入区域更明显
    padding: 10,
    width: "80%",
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
});

export default GoalInput;

额外优化建议 #

• 用Math.random()生成id不是生产环境的最佳选择，推荐使用uuid库或者其他可靠的唯一id生成方式。
• 可以给GoalItem添加删除确认逻辑，避免用户误触。
• 可以给输入框添加长度限制或者校验，提升输入的有效性。

内容的提问来源于stack exchange，提问作者sh karri