在React Native中动态查询Firestore

时间:2019-04-17 19:00:42

标签: react-native redux google-cloud-firestore react-native-firebase

我正在从Firebase / Fire Store实时获取消息。但是我想通过将动态数字(日期)传递给Firestore中的where子句来动态查询数据,如果数据的数字(日期)大于给定的动态数字,则获取数据。我正在从redux存储获取动态数据,并将其通过props传递到where。但问题是数字未更新。我在构造函数中定义了Firestore内容。我在下面附加了我的代码。 我的目标是如果数据的日期大于给定的日期,则从Firestore中获取数据。

我尝试了很多方法,发现从后端发送消息时,redux传递的动态日期不会更新bcoz,我在构造函数中使用了props值。

...
import firebase from 'react-native-firebase'

import {addLastSeen} from '../Redux/Actions'
import {addMessage} from '../Redux/Actions'
import {connect} from 'react-redux'

firebase.initializeApp({
  apiKey: 'AIzaSyDA8acz_UcdHK1QaIPd6sG1Cp5bma_gTvg',
  projectId: 'notifaapp'
})

const firestore = firebase.firestore()

class Navigate extends React.Component{
    constructor(props) {
        super(props);
        this.ref = firestore.collection('messages')
                           .orderBy('date', 'desc')
                          .where("date",'>' ,this.props.lastSeen) 
                 // date is something like this 1555520642840
                 // this.props.lastSeen is getting from redux store via props
        this.unsubscribe = null;
    }
    componentDidMount() {
        this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate)
    }
    componentWillUnmount() {
        this.unsubscribe();
    }
    onCollectionUpdate = (querySnapshot) => {
      const todos = [];
      querySnapshot.forEach((doc) => {
        const { title, complete, message, date } = doc.data();
        this.props.addLastSeen(date) // dispatching an action and update redux store
        todos.push({
          key: doc.id,
          title,
          message,
          date : new Date(date)
        });

      });
      alert(JSON.stringify(todos))
      todos.map(value => {
        message = {
            "key": value.key,
            "title": value.title,
            "body": value.message,
            "date": value.date,
            "read":"false",
            "archived":"false"
          }
          this.props.add(message)
      })
    }
    render(){
        return(
            ...
        )
    }
}

function mapStateToProps(state){
  return {
    lastSeen : state.lastSeen.date,// getting date from redux store
  }
}

export default connect(mapStateToProps, {add:addMessage, addLastSeen:addLastSeen})(Navigate) 


1 个答案:

答案 0 :(得分:0)

您必须先创建新查询并重新订阅,才能更改onSnapshot查询。

您可以利用componentDidUpdate lifecycle call并检查lastseen属性中的更改。

[{
    $match: {
        user_id: ObjectId("5c9168ec5530c90d0c5cd98a")
    }
}, {
    $match: {
        datetime: {
            $gte: ISODate("2019-02-01T00:00:00Z"),
            $lt: ISODate("2019-04-01T00:00:00Z")
        }
    }
}]

尽管这可能会解决您的问题,但我想它会引起很多订阅操作,并重新呈现