javascript - react native /Firebase : Pushing data from multiple ".on" calls

Question

我在从多个 Firebase .on 调用获取数据时遇到一些困难。问题是我收到重复列表，因为我将数据推送到名为 items 的数组中，但我不确定如何在数据应该更新时清除该数组(导致重复)。我尝试过使用 componentWillUpdate() 和 componentDidUpdate() 生命周期方法，但 .on 调用似乎在不提醒它们的情况下更新。

我会将 items 数组放置在 .on 调用之一中，但随后我不确定如何从其他“.on”调用将数据推送到其中。

我的数据库的结构方式是有一些称为“汽车”的对象，每个“汽车”对象可以有多个属性，(对我来说)最重要的是“模型”。有几辆车具有相同的型号，但我试图获取每个型号的最后一个“汽车”对象。所以，如果我有 Accord、Civic、Sentra 等，我想要最后一辆 Accord、最后一辆 Civic、最后一辆 Sentra 等等。

这是我当前使用的代码:

import React from 'react'; 
import { View, Text, FlatList } from 'react-native'; 
import firebase from 'react-native-firebase'; 
import TypeItem from './TypeItem'; 

DB = firebase.database().ref('cars/'); 


export default class LatestType extends React.PureComponent {
    constructor(props) {
        super(props); 
        this.state = {
            data: []
        }; 
        this.pushReports = this.pushReports.bind(this); 
        this.makeRemoteRequest = this.makeRemoteRequest.bind(this); 
    }

    makeRemoteRequest = () => {
        let items = []; 
        models.forEach(element => {  //models is an array of the list of models
            this.pushReports(element, items); 
        });
        console.log("These are the items from Status Screen: ",items); 
    }

    pushReports = (model, items) => {
        let item = {}; 
        DB.orderByChild("model")
        .equalTo(model) 
        .limitToLast(1)
        .on("child_added", snap => {
            item = {
                key: snap.key, 
                type: snap.val().type, 
                model: snap.val().model, 
            }
            items.push(item); 
            this.setState({
                data:items
            });
        }); 
    }

    componentWillMount(){
        this.makeRemoteRequest(); 
    }

    componentWillUnmount(){
        DB.off(); 
    }



    render() {
        return (
            <View>
                <FlatList 
                    data={this.state.data}
                    renderItem={({item}) => <TypeItem item={item} />}
                />
            </View>
        );
    }
}

Answer 1

尝试

this.setState({
  data:[...items]
});

代替你的

this.setState({
  data:items
});