Question

我正在为此应用程序使用Firebase和React导航。

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

但是，如果我导航到另一个页面，然后向后导航（未手动调用goBack（）函数），则不会渲染任何项目。通过使用控制台日志，我能够找出以下内容：

重新访问页面时，再次调用

-componentDidMount（）。

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

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

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

-状态会重新设置为构造函数分配的状态，因为再次将load设置为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（）。

ALSO：可能很重要的事情：当我从一页（Feed）导航到遇到（RestaurantPage）问题的页面时，会发生此问题。然后，我使用navBar导航回（Feed），然后导航回（RestaurantPage），这时我发现Firebase ref（）无法正常工作。

Stack Navigator：

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（）

React Native Firebase Ref（）和导航并发症

1 个答案: