Question

我试图重新渲染平面列表，但现在无法更新

我从实时数据库中获取数据，并作为数据道具传递给Flatlist，并编写了一个从列表和数据库中删除项目的功能，并且运行良好，但是当我删除列表的最后一个时，我看不到空屏幕“列表”中只有最后一个被删除的库存，尽管它已删除在数据库中！

代码

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, ScrollView, TouchableOpacity } from 'react-native';
import firebase from "react-native-firebase";
import Icon from 'react-native-vector-icons/Ionicons';

class UserFavorites extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentUser: null,
            favorites: [],

        }
    }
    componentDidMount() {
        const currentUser = firebase.auth().currentUser.uid;
        this.setState({ currentUser });
        const favorites = firebase.database().ref(`favorites/${currentUser}`);
        favorites.on("value", (snapshot) => {
            let favorites = []
            snapshot.forEach((childSnapshot) => {
                favorites.push({
                    ProviderId: childSnapshot.val().ProviderId,
                    providerName: childSnapshot.val().providerName,
                    providerService: childSnapshot.val().providerService,
                });
                this.setState({ favorites })
            });
        });
    }
    _listEmptyComponent = () => {
        return (
            <View style={styles.container}>
                <Text style={{ alignSelf: "center" }}> No favorites Provider Found :O</Text>
            </View>
        )
    }
    render() {
        const { fav } = this.state;
        return (
            <View style={styles.container} >
                <FlatList data={this.state.favorites}
                    key={Math.random() * 1000}
                    contentContainerStyle={{ flexGrow: 1 }}
                    ListEmptyComponent={this._listEmptyComponent()}
                    extraData={this.state}
                    renderItem={({ item }) => {
                        return (
                            <ScrollView>
                                <TouchableOpacity>
                                    <View
                                        style={{
                                            flex: 1,
                                            paddingLeft: 15,
                                            paddingRight: 10,
                                            height: 105,
                                            alignItems: "center",
                                            backgroundColor: "#fafafa",
                                            flexDirection: "row",
                                            borderBottomWidth: .8,
                                            borderBottomColor: "#aaa"
                                        }}>
                                        <Icon style={{ alignSelf: "center" }} name="ios-contact" size={60} color="#1567d3" />
                                        <View style={{ flex: 1, padding: 5, flexDirection: "row" }}>
                                            <View style={{ marginLeft: 27 }}>
                                                <Text style={{
                                                    fontSize: 18,
                                                    fontWeight: "800",
                                                    fontFamily: 'Gill Sans',
                                                    color: '#000',
                                                }}>
                                                    {item.providerName}
                                                </Text>
                                                <Text style={{
                                                    fontSize: 18,
                                                    fontWeight: "800",
                                                    fontFamily: 'Gill Sans',
                                                    color: '#000',
                                                }}>
                                                    {item.providerService}

                                                </Text>
                                            </View>
                                            <View style={{ alignItems: "flex-end", justifyContent: "center", flex: 1 }}>
                                                <Icon style={{ marginRight: 20 }}
                                                    name={`ios-heart${fav ? "" : "-empty"}`}
                                                    size={35} color="#f00"
                                                    onPress={() => {
                                                        const currentUser = firebase.auth().currentUser.uid;
                                                        firebase.database().ref(`favorites/${currentUser}/${item.ProviderId}`).remove().then(() => alert("Removed"))
                                                    }}
                                                />
                                            </View>

                                        </View>

                                    </View>
                                </TouchableOpacity>
                            </ScrollView>
                        )
                    }
                    }
                    keyExtractor={(item, index) => index.toString()}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

export default UserFavorites;

Answer 1

您要从Firebase中删除项目，而不是从固定列表的数据源this.state.favorites中删除项目，添加一个从Firebase中删除项目后将调用的函数。

_onRemove = (_item) => { 

   this.setState({ 
     favorites: this.state.favorites.filter(item => item.ProviderId !== _item.ProviderId) 
   });
}

将要删除的项目传递给单位列表中的功能

renderItem={({ item }) => {
  return ....
   //scrollview code
   <Icon style={{ marginRight: 20 }}
    name={`ios-heart${fav ? "" : "-empty"}`}
    size={35} color="#f00"
    onPress={() => {
       const currentUser = firebase.auth().currentUser.uid;
       ....
       // firebase code
       this._onRemove(item);
    }
   />
  ....
  //rest of the code
}}

删除最后一项后无法重新渲染FlatList，尽管使用extraData-React Native

代码

1 个答案: