使用过滤器方法删除列表元素答案

【问题标题】：delete list element using filter method使用过滤器方法删除列表元素
【发布时间】：2022-01-22 00:15:03
【问题描述】：

我正在本地处理待办事项列表，我有一个名为 onDelete 的函数，但是当我单击它时，它会删除列表中的所有元素，然后程序崩溃。这是我的主文件，我将值存储为键、值对

export default function App() {
  const [courseGoal, setCourseGoal] = useState([]);
  const [count, setCount] = useState('');

  const submitHandler = () => {
    setCourseGoal((currGoal) => [
      ...currGoal,  
      { key: Math.random().toString(), value: count },
    ]);
  };
  console.log('App', courseGoal)
  return (
    <View style={styles.container}>
      <SearchBar
        setCourseGoal={setCourseGoal}
        count={count}
        setCount={setCount}
        submitHandler={submitHandler}
      />
      <ListItem courseGoal={courseGoal} setCourseGoal={setCourseGoal} courseGoal={courseGoal}/>
    </View>
  );
}

这是我面临问题的列表组件，您可以在此处查看 ondelete。

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

export default function ListItem(props) {
  const onDelete = (goalId) => {
    props.setCourseGoal((currGoal) => {
      currGoal.filter((goal) => goal.key !== goalId);
      console.log("clicked", props.courseGoal[0].key);
    });
   
  };

  return (
    <FlatList
      data={props.courseGoal}
      keyExtractor={(item, index) => item.key}
      renderItem={(itemData) => (
        <TouchableOpacity
          onPress={onDelete.bind(itemData.item.key)}
          activeOpacity={0.2}
        >
          <Text style={styles.listData}>{itemData.item.value}</Text>
          {console.log(itemData.item.key)}
        </TouchableOpacity>
      )}
    />
  );
}

这是我有搜索输入的主要组件

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

export default function SearchBar(props) {
  const onInputHandler = (value) => {
    props.setCount(value);
  };

  return (
    <View style={styles.searchBox}>
      <Pressable style={styles.submitBtn} title="Click Me !">
        <Text>☀️</Text>
      </Pressable>
      <TextInput
        style={styles.searchInput}
        placeholder="Enter Goal"
        onChangeText={onInputHandler}
      />
      <Pressable
        style={styles.submitBtn}
        title="Click Me !"
        onPress={props.submitHandler}
      >
        <Text>????????</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  searchBox: {
    flexDirection: "row",
    justifyContent: "space-around",
  },
  searchInput: {
    width: "90%",
    textAlign: "center",
    padding: 10,
    // color: 'white',
    borderRadius: 10,
    borderWidth: 1,
    marginHorizontal: 5,
  },
  submitBtn: {
    color: "black",
    justifyContent: "space-around",
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
  },
});

【问题讨论】：

标签： javascript react-native

【解决方案1】：

您必须从 onDelete 函数中返回过滤后的数组

const onDelete = (goalId) => {
    props.setCourseGoal((currGoal) => {
        return currGoal.filter((goal) => goal.key !== goalId);
    });
};

【讨论】：