如何使用本机中已删除的图标从 Flatlist 中删除数据

Question

function Three({ navigation, route }) {
     const Data = [
        {
            id: route.params.paramKey,
            name: route.params.paramKey1,
            note: route.params.paramKey2,
            desc: route.params.paramKey3,
        }
    ];

    const Delete=()=>{
        setInfo("")
    }

    const renderItem = ({ item }) => (

        <View style={{ backgroundColor: 'yellow', height: 160, width: 350, borderRadius: 15, paddingLeft: 10, marginTop: 30, marginLeft: 10 }}>
            <Text style={{ color: 'black', fontSize: 20 }}>selected Date:
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey}</Text>
            </Text>

            <Text style={{ color: 'black', fontSize: 20 }}>
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey1}</Text>
            </Text>

            <Text style={{ color: 'black', fontSize: 20 }}>Note Title:
                <Text style={{ color: 'green', fontWeight: 'bold' }}> {route.params.paramKey2}</Text>
            </Text>
            <Text style={{ color: 'black', fontSize: 20 }}>Note Description:
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey3}</Text>
            </Text>
            <TouchableOpacity
            onPress={()=>Delete()}
            style={{marginLeft:310,marginTop:15}}
            >
                <Icon name="trash" size={30} color="red"/>
            </TouchableOpacity>

        </View>

    );

    return (
        <SafeAreaView style={{ flex: 1 }}>

            <FlatList
                data={Data}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />

        </SafeAreaView >
    );

}


export default Home;

这是我的 output

我想要这样

• 如果我单击删除图标，此平面列表数据将从屏幕上删除

• 我正在使用路由将一页的值传递给另一页

• 我不明白如何从中删除我可以做的项目但是

• 它不工作

• 那我该怎么做

Answer 1

您需要做一些事情。

第一个，使用useState来处理数据。 改变这个：

     const Data = [
        {
            id: route.params.paramKey,
            name: route.params.paramKey1,
            note: route.params.paramKey2,
            desc: route.params.paramKey3,
        }
    ];

对此：

 const [data, setData] = useState([
    {
      id: route.params.paramKey,
      name: route.params.paramKey1,
      note: route.params.paramKey2,
      desc: route.params.paramKey3,
    },
  ]);

第二个是，删除时更改state。

const Delete = (index) => {
    setData((prev) => {
      prev.splice(index, 1);
      return [...prev];
    });
  };

最后，为函数输入添加索引，并将Data重命名为FlatList中的data 。

这是完整的例子：

function Three({ navigation, route }) {
  const [data, setData] = useState([
    {
      id: route.params.paramKey,
      name: route.params.paramKey1,
      note: route.params.paramKey2,
      desc: route.params.paramKey3,
    },
  ]);

  const Delete = (index) => {
    setData((prev) => {
      prev.splice(index, 1);
      return [...prev];
    });
  };

  const renderItem = ({ item, index }) => (
    <View
      style={{
        backgroundColor: 'yellow',
        height: 160,
        width: 350,
        borderRadius: 15,
        paddingLeft: 10,
        marginTop: 30,
        marginLeft: 10,
      }}
    >
      <Text style={{ color: 'black', fontSize: 20 }}>
        selected Date:
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {route.params.paramKey}
        </Text>
      </Text>

      <Text style={{ color: 'black', fontSize: 20 }}>
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {route.params.paramKey1}
        </Text>
      </Text>

      <Text style={{ color: 'black', fontSize: 20 }}>
        Note Title:
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {' '}
          {route.params.paramKey2}
        </Text>
      </Text>
      <Text style={{ color: 'black', fontSize: 20 }}>
        Note Description:
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {route.params.paramKey3}
        </Text>
      </Text>
      <TouchableOpacity
        onPress={() => Delete(index)}
        style={{ marginLeft: 310, marginTop: 15 }}
      >
        <Icon name="trash" size={30} color="red" />
      </TouchableOpacity>
    </View>
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  );
}

export default Home;