Question

我正在与Firebase Firestore合作，以实时存储和获取数据。

我正在渲染从FlatList中获得的数据，并且已经阅读了文档，并假设我遵循了文档中说明的每个步骤，并且我完全理解了文档中说明的内容。但是，将字段添加到文档时，FlatList中的数组是重复的，有时是x8。我正在使用redux。

我已经在线尝试了所有可能的解决方案，但似乎无法找到解决此问题的完美解决方案。我也不知道我是否正确取消订阅。如果能在这里得到一些帮助，将不胜感激。以下是我的示例代码，为清晰起见，我对其进行了清理。

constructor(props) {
    super(props);
    this.state = {
        isLoading: false,
    };
    this.unsubscribe = null;
}

componentDidMount() {
    this.unsubscribe = this.getRealTimeData();
}

componentWillUnmount() {
    this.unsubscribe();
}

getRealTimeData = () => {
    const myData = [];
    this.setState({
        isLoading: true,
    });
    firebase.firestore().collection('Data').onSnapshot((querySnapshot) => {
        if (querySnapshot.empty) {
            console.log('empty');
            this.setState({
                isLoading: false,
            });
            this.props.changeData([]);
        }
        querySnapshot.docChanges().forEach(change => {
            const doc = change.doc;
            const {
                Image
            } = doc.data();
            const item = doc.data();
            item.docId = doc.id;
            return new Promise(async() => {
                await FileSystem.downloadAsync(
                    Image,
                    `${FileSystem.documentDirectory}${Date.now()}.jpg`,
                ).then((url) => {
                    item.localImage = url.uri;
                    this.setState({
                        isLoading: false,
                    });
                    if (change.type === 'added') {
                        console.log('added');
                        myData.push(item);
                        this.props.changeData(myData);
                    } else if (change.type === 'removed') {
                        myData.push(item);
                        const newData = myData.filter(task => task.docId !== doc.id);
                        return this.props.changeData(newData);
                    } else if (change.type === 'modified') {
                        console.log('modified');
                    }
                }).catch((e) => {
                    Alert.alert('Error occured while fetching data');
                    console.log(e);
                });
            });
        });
    });
}

Firestore onSnapshot会将条目重复复制到Flatlist

0 个答案: