React Native/Firebase多.on调用数据推送重复问题求助

问题核心分析 #

你遇到的问题主要来自三个方面：

1. 重复数据产生：on("child_added")会在初始加载和每次对应车型新增数据时触发回调，你直接往数组push数据却没有去重/覆盖逻辑，导致同车型条目重复出现。
2. 生命周期方法失效：componentWillUpdate和componentDidUpdate仅在组件props/state主动变化时触发，而Firebase的异步回调触发setState时，这些方法无法精准对应数据更新的时机，清空数组的逻辑自然不起作用。
3. 数组作用域冲突：你当前的items是makeRemoteRequest的局部变量，会被所有pushReports的回调闭包引用，后续新数据触发时仍会往同一个数组添加内容，没有重置机制。

解决方案 #

方案一：仅获取初始数据（无需实时更新）

如果不需要实时监听数据变化，用.once("value")替代.on("child_added")，只获取一次数据即可避免重复触发：

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

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

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

  async makeRemoteRequest() {
    const itemsMap = {}; // 用对象存储每个车型的最新条目，自动去重
    // 用for...of保证异步请求顺序执行
    for (const model of models) {
      const snapshot = await DB.orderByChild("model")
        .equalTo(model)
        .limitToLast(1)
        .once("value");
      
      snapshot.forEach(snap => {
        itemsMap[model] = {
          key: snap.key,
          type: snap.val().type,
          model: snap.val().model,
        };
      });
    }
    // 将对象转为数组更新state
    const items = Object.values(itemsMap);
    this.setState({ data: items });
    console.log("These are the items from Status Screen: ", items);
  }

  componentDidMount(){
    this.makeRemoteRequest();
  }

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

方案二：需要实时监听数据变化

如果要实时同步每个车型的最新数据，我们给每个车型单独设置监听，并用对象维护数据以避免重复：

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

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

export default class LatestType extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.modelListeners = {}; // 存储每个车型的监听引用，用于卸载时取消
  }

  componentDidMount(){
    this.setupModelListeners();
  }

  setupModelListeners() {
    const itemsMap = {};
    models.forEach(model => {
      // 给每个车型设置单独监听，仅获取最新一条数据
      const listener = DB.orderByChild("model")
        .equalTo(model)
        .limitToLast(1)
        .on("value", snapshot => {
          snapshot.forEach(snap => {
            // 覆盖对应车型的旧数据，避免重复
            itemsMap[model] = {
              key: snap.key,
              type: snap.val().type,
              model: snap.val().model,
            };
            // 转数组更新state
            this.setState({ data: Object.values(itemsMap) });
          });
        });
      // 保存监听引用，方便后续取消
      this.modelListeners[model] = listener;
    });
  }

  componentWillUnmount(){
    // 取消所有车型的监听，避免内存泄漏
    Object.values(this.modelListeners).forEach(listener => {
      DB.off("value", listener);
    });
  }

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

关键说明 #

• 用对象替代数组存储：以车型model为键，确保每个车型只会保留最新一条数据，新数据到来时直接覆盖旧数据，从根源解决重复问题。
• 监听管理：使用.on监听时，务必在componentWillUnmount中取消所有监听，避免内存泄漏。
• 异步顺序控制：用async/await配合.once("value")可以保证数据按顺序获取，避免异步回调导致的数组混乱。

内容的提问来源于stack exchange，提问作者user8951490