Реагировать на собственный Firebase Ref () и усложнение навигации

Question

Я использую 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.log(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.log("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 })
  },
);

Answer 1

Проблема была в том, что я не вызывал off () для ссылки на firebase после вызова on ()!

Решение состоит в том, чтобы вызвать Ref.off () в componentDidUnmount или просто использовать Ref.once () вместо Ref.on ()