React Native Firebase Ref () и усложнение навигации

Я использую firebase вместе с навигацией React для этого приложения.

Что касается моего компонента, я могу извлекать данные из моей базы данных firebase в реальном времени, чтобы заполнить массив компонентов. Это делается в моей функции componentDidMount ().

Однако если я перейду на другую страницу, а затем вернусь назад (функция goBack () не вызывается вручную), элементы не отображаются. Используя журналы консоли, я смог выяснить следующее:

-componentDidMount () вызывается снова, когда я повторно посещаю страницу.

-Я могу войти в функцию, указанную в:

Ref.on('value', (snap) => { .... });

поскольку я могу вызывать журналы консоли изнутри.

-состояния сбрасываются обратно к тому, что назначает конструктор, так как загрузка снова устанавливается в значение true.

Похоже, я просто не могу получить данные из firebase после первого вызова ref (). Ниже приведены важные аспекты моего кода.

export default class RestaurantPage extends Component<Props> {
  constructor(props){
    super(props);
    this.state = {
    showSearch:false,
    loading:true,
    index:0,
    data: []
  }
  this.rootRef = firebaseApp.database().ref();
  this.cards = [];
}

componentDidMount(){
var Ref = firebaseApp.database().ref("Restaurants");
Ref.on('value', (snap) => {
  var restaurants = snap.val();
  this.setState({data: Object.keys(restaurants)});
  console.info(this.state.data);
  var day = moment().format('dddd');
  for(var i = 0; i < this.state.data.length; i++){
    var newSnap = snap.child(this.state.data[i]);

    var id = newSnap.val()
    var name = newSnap.child('Name').val();
    var cuisine = newSnap.child('Cuisine').val();
    var price = newSnap.child('Price').val();
    var address = newSnap.child('Address').val();
    var closing = newSnap.child('Closing/' + day).val();
    var description = newSnap.child('Description').val();
    this.cards.push(
    <RestaurantCard key = {i}
                    id = {id}
                    title = {name}
                    cost = {price}
                    cuisine = {cuisine}
                    tags = {756}
                    closing  = {closing}
                    distance = {address}
                    description = {description}/>);
  }
  this.setState({loading:false});
});
}


renderCards = () => {
 console.info("rendercards called");
 return(
   {this.cards}
 );
 }

Кто-нибудь знает об этом?

Боковое примечание: никаких проблем не возникает, если я просто перехожу на другую страницу, а затем использую функцию goBack (), поскольку я считаю, что все состояния в любом случае сохраняются в этом случае. Дополнительно: я использую this.props.navigation.navigate (), а не push ().

ТАКЖЕ: кое-что, что может быть весьма важным: проблема возникает, когда я перехожу с одной страницы (Feed) на страницу, с которой у меня возникают проблемы (RestaurantPage). Затем я возвращаюсь к (Feed), используя свой navBar, а затем возвращаюсь к (RestaurantPage), после чего я вижу, что firebase ref () не работает.

Навигатор стека:

export default createStackNavigator(
  {
    RestaurantProfile: RestaurantProfile,
    RestaurantPage: RestaurantPage,
    SearchPage: SearchPage,
    SearchResults: SearchResults,
    Feed: Feed,
    OtherUserProfile: OtherUserProfile,
    OtherUserTags: OtherUserTags,
    PersonalTags: PersonalTags
  },
  {
    headerMode:'none',
    initialRouteName: 'Feed',
    transitionConfig: () => ({ screenInterpolator: () => null })
  },
);