Question

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

我会将items数组放在其中一个.on个调用中，但后来我不知道如何将数据从其他调用中推送到其中＃。调用。

我的数据库结构的方式是有些对象称为＆＃34; cars＆＃34 ;,每个＆＃34; cars＆＃34;对象可以有多个属性，最重要的（对我而言）是＆＃34; model＆＃34;。有几辆车有相同型号，但我试图得到最后的＆＃34;汽车＆＃34;每个模型的对象。所以，如果我有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
});

React Native / Firebase：从多个＆＃34; .on＆＃34;中推送数据电话

1 个答案: