简体   繁体   中英

When i want to delete one item in my list, everything gets deleted Expo, React Native

This is my app.js

the main body of my app. ... 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) => {
    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;

... I believe that the key might be the issue but i'm really not sure. What's supposed to happen is that when you click on an item in the list, it should be deleted, however it's deleting my whole list. How do i solve this?

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


try this

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM