React Native Firebase Ref() 和导航复杂化

Question

我正在为这个应用程序使用 firebase 和 React 导航。

对于我的一个组件，我能够从我的 firebase 实时数据库中检索数据以填充一组组件。这是在我的 componentDidMount() 函数中完成的。

但是，如果我导航到另一个页面，然后返回（未手动调用 goBack() 函数），则不会呈现任何项目。通过使用控制台日志，我能够弄清楚以下内容：

-componentDidMount() 在我重新访问该页面时再次被调用。

-我可以进入以下指定的功能：

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

因为我可以从那里调用控制台日志。

-states 被重置为构造函数分配的状态，因为 loading 再次设置为 true。

第一次调用 ref() 后，我似乎根本无法从 firebase 检索数据。以下是我的代码的重要方面。

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)，然后导航回 (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

问题是我在调用 on() 后没有在 firebase ref 上调用 off()！

解决方法是在 componentDidUnmount 中调用 Ref.off() 或者干脆使用 Ref.once() 函数而不是 Ref.on()