Question

我创建了一个平面列表和一个浮动图标，以从平面列表中删除项目，但是在删除之前，用户将收到Alert（警报），按Yes（是）将b删除所有内容，但是按Yes（是）后，项目并未删除。如何删除？这是我的代码

state = {
modal: false,
post: [
  {
    key: "1",
    title: "A Good Boi",
    des: "He's a good boi and every one know it.",
    image: require("../assets/dog.jpg"),
  },
  {
    key: "2",
    title: "John Cena",
    des: "As you can see, You can't see me!",
    image: require("../assets/cena.jpg"),
  },
],
image: null,
};

deleteItem = (key) => {
Alert.alert("Delete", "Are You Sure?", [
  {
    text: "Yes",
    onPress: this.setState({
      post: this.state.post.filter((item) => item.key !== key),
    }),
  },
  { text: "no" },
]);
 };
render(){return(
 <FlatList
      data={this.state.post}
      renderItem={({ item }) => (
        <>
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={this.deleteItem}
            style={styles.Delete}
          >
            <MaterialCommunityIcons name="delete" color="red" size={30} />
          </TouchableOpacity>

请有人帮忙......................................

Answer 1

您可能需要将该项目或该项目的索引传递给该函数，但是我不确定body组件的内部。下面显示了如何将项目及其键传递给TouchableOpacity方法：

deleteItem

Answer 2

在FlatList中您必须在FlatList中使用prop keyExtractor。（通过这样做，您可以为数组中的每个对象分配一个键）您还必须在“ deleteItem（）”函数中传递密钥就像我在以下代码中所做的一样

 import React from 'react'
        import {View, Text,StyleSheet, FlatList,TouchableOpacity,Alert} from 'react-native'
        
        
        export default class App extends React.Component {
          constructor(props) {
            super(props);
        this.state = {
          modal: false,
          post: [
            {
              key: "1",
              title: "A Good Boi",
              des: "He's a good boi and every one know it.",
             
            },
            {
              key: "2",
              title: "John Cena",
              des: "As you can see, You can't see me!",
              
            },
          ],
          image: null,
          };
        }
          
          deleteItem = (key) => {
          Alert.alert("Delete", "Are You Sure?", [
            {
              text: "Yes",
              onPress:()=> this.setState({
                post: this.state.post.filter((item) => item.key !== key),
              }),
            },
            { text: "no",
          onPress:()=>null },
          ]);
           };
        
          render(){return(
         <View style={{flex:1}}>
           <FlatList
                data={this.state.post}
                keyExtractor={(item)=> item.key}
                renderItem={({ item }) => (
                  <TouchableOpacity
                  onPress={()=>{this.deleteItem(item.key)}}
                  >
                  <View>
                  <Text>`Click here to Delete this =${item.title}`</Text>
 <MaterialCommunityIcons name="delete" color="red" size={30} />
 </View>
                    </TouchableOpacity>
                  )}/>
                  </View>
          )}
                }

警报删除：无法从平面列表中删除项目

2 个答案: