我无法删除我的 React Native 应用程序中的项目

Question

我无法删除项目。

这是App.js文件主文件：

import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
  FlatList,
} from "react-native";
import Goalresults from "./Componets/Goalresult";

export default function App() {
  const [comingdata, SetData] = useState("");
  const [listdata, setlistdata] = useState([]);

  function fetchText(enteredText) {
    SetData(enteredText);
  }

  function buttonPress() {
    setlistdata((newdata) => [
      ...newdata,
      { text: comingdata, id: Math.random.toString() },
    ]);
  }

我在这里将 id 作为参数传递并使用 filter 方法，以便它过滤所有 id 并从数组列表中删除 id。

  function deleteitem(id) {
    setlistdata((newdata) => {
      return newdata.filter((goal) => goal.id !== id);
    });
  }
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.goalsc}>Your Goals</Text>
      </View>
      <View style={styles.container1}>
        <TextInput
          style={styles.textInput}
          placeholder="Add Your Goals here..."
          onChangeText={fetchText}
        />
        <Button title="Add Goal" onPress={buttonPress} />
      </View>
      <View style={styles.hello}>
        <FlatList
          data={listdata}
          renderItem={(itemdata) => {
            return (

              <Goalresults
                id={itemdata.item.id}
                onDeleteItem={deleteitem}
                text={itemdata.item.text}
              />
            );
          }}
          keyExtractor={(item, index) => {
            return item.id;
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 16,
  },
  container1: {
    flex: 1,
    height: 120,
    // paddingTop: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#808080",
  },
  textInput: {
    width: "70%",
    borderWidth: 1,
    borderRadius: 10,
    marginRight: 10,
    padding: 8,
  },

  hello: {
    flex: 3,
  },
  goalsc: {
    fontSize: 20,
    fontWeight: "bold",
    paddingLeft: 140,
  },
});

第二个分隔文件：

import { View, Text, StyleSheet,Pressable} from "react-native";
function Goalresults(props) {

我在那里使用 bind 来绑定 id:

  return (
      <Pressable onPress={props.onDeleteItem.bind(this,props.id)}>
    <View style={styles.goalInput}>
      <Text style={styles.textcolor}>{props.text}</Text>
    </View>
    </Pressable>
  );
}
export default Goalresults;

const styles = StyleSheet.create({
  goalInput: {
    flex: 5,
    borderRadius: 5,
    paddingTop: 10,
    backgroundColor: "#A020F0",
    padding: 10,
    margin: 10,
  },
  textcolor: {
    color: "white",
  },
});

Answer 1

您的代码存在一些问题。我会罗列如下。

在 Goalresults 函数中将 Pressable 上的绑定更改为如下：<Pressable onPress={props.onDeleteItem.bind(props, props.id)}>
在 buttonPress 函数中更正此行 { text: comingdata, id: Math.random().toString() }, 您随机错过了 '()' 括号
还在 目标结果 上添加 key={itemdata.item.id}。这将有助于解决警告“重复键”。

完整代码如下

App.js

export default function App() {
    const [comingdata, SetData] = useState("");
    const [listdata, setlistdata] = useState([]);

    function fetchText(enteredText) {
        SetData(enteredText);
    }

    function buttonPress() {
        setlistdata((newdata) => [
            ...newdata,
            { text: comingdata, id: Math.random().toString() },
        ]);
    }

    function deleteitem(id) {
        console.log('id: ', id)
        setlistdata((newdata) => {
            return newdata.filter((goal) => goal.id !== id);
        });
    }
    
    return (
        <View style={styles.container}>
            <View>
                <Text style={styles.goalsc}>Your Goals</Text>
            </View>
            <View style={styles.container1}>
                <TextInput
                    style={styles.textInput}
                    placeholder="Add Your Goals here..."
                    onChangeText={fetchText}
                />
                <Button title="Add Goal" onPress={buttonPress} />
            </View>
            <View style={styles.hello}>
                <FlatList
                    data={listdata}
                    renderItem={(itemdata) => {
                        return (
                            <Goalresults
                                key={itemdata.item.id}
                                id={itemdata.item.id}
                                onDeleteItem={deleteitem}
                                text={itemdata.item.text}
                            />
                        );
                    }}
                    keyExtractor={(item, index) => {
                        return item.id;
                    }}
                />
            </View>
        </View>
    );
}

GoalResults.js

function Goalresults(props) {
    return (
        <Pressable onPress={props.onDeleteItem.bind(props, props.id)}>
            <View style={styles.goalInput}>
                <Text style={styles.textcolor}>{props.text}</Text>
            </View>
        </Pressable>
    );
}

我无法删除我的 React Native 应用程序中的项目

I am unable to delete items in my React Native app

react-native