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

【问题标题】：Alert Delete: Unable to delete item from flat list警报删除：无法从平面列表中删除项目
【发布时间】：2020-09-30 23:22:22
【问题描述】：

我创建了一个平面列表和一个浮动图标来从平面列表中删除一个项目，但在删除之前，用户会收到警报，然后按是，它将被删除一切正常，但在按是后项目没有被删除。我怎样才能删除它？这是我的代码

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>

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

【问题讨论】：

标签： javascript reactjs react-native expo

【解决方案1】：

您可能需要将项目或项目的索引传递给函数，但我不确定TouchableOpacity 组件的内部结构。下面展示了如何将项目及其密钥传递给deleteItem 方法：


deleteItem = (item) => {
  Alert.alert("Delete", "Are You Sure?", [
    {
      text: "Yes",
      onPress: () => this.setState({ // edited
        post: this.state.post.filter((p) => p.key !== item.key),
      }),
    },
    { text: "no" },
  ]);
};

render(){
  return(
    <FlatList
      data={this.state.post}
      renderItem={({ item }) => (
        <>
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => this.deleteItem(item)}
            style={styles.Delete}
          >
            <MaterialCommunityIcons name="delete" color="red" size={30} />
          </TouchableOpacity>
        </>
      )}
    />
  );
};

【讨论】：

它工作得很好，但一个问题是当我点击图标然后显示警报时删除项目
哎呀——答案更新了！ onPress 值必须是被调用的函数。以前，每次单击按钮时它都会自动执行代码。
Worked thnx :)) 我是新来的课程。你能帮我解决另一个问题吗？
我很乐意，但打开一个新问题，然后在此处链接。如果这有效，请将其标记为答案。 :D
stackoverflow.com/questions/64141658/…

【解决方案2】：

在平面列表中您必须在 FlatList 中使用道具 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>
          )}
                }

【讨论】：