Question

我将Google Firestore用作React Native的后端。

我创建了一个用于存储有关Firestore的所有内容（方法，信息等）的类，并在该类中使用实时更新（https://firebase.google.com/docs/firestore/query-data/listen）：

class Fire{
  constructor() {
    this.user = {};  //is defined when the user log in
    this.userDocument = null;
  }

  _getRealTimeData = () => {
    const realTimeDatabaseRef = db.collection("users").doc(this.user.uid);
    realTimeDatabaseRef.onSnapshot(doc => {
      try {
        if (doc.exists) {
         this.userDocument = doc.data();
        } else {
          this.userDocument = null;
        }
      } catch (error) {
        console.log(error);
        this.userDocument = null;
      }
    });
  };
}
Fire = new Fire();
export default Fire;

所以这很好，每当我更新Firestore数据库时，我都会自动获取新值并将其存储在： this.userDocument

问题是，当此值更改时，本机组件不会更新，这显然是因为该组件的状态未更新。

所以我的问题是，我如何通知组件Fire类中“ this.userDocument”的值已更改？这样我就可以通过this.setState（{userDocument：Fire.userDocument}）更新状态。

注意：现在，我只是从componentDidMount（）中的“ this.userDocument”中获取数据：

import Fire, { db } from "../../Fire";
export default class Profile extends Component {
    state={ userDocument:null }
    componentDidMount(){
      Fire._getRealTimeData()
      this.setState({userDocument: Fire.userDocument})
    }
  render(){...whatever I render}
}

Answer 1

a）您可以将回调传递给Fire，然后调用它以在Profile组件上设置状态。

b）传递一个Promise to Fire组件，并解决/拒绝它以将状态设置为Profile组件。

Answer 2

您在{Profile}处的状态仅在componentDidMount处发生更改，因此没有任何内容告诉该组件应该再次呈现它。

我不知道用户在firebase上用于更新其个人资料数据的操作是什么，但是最后添加类似的内容

  if (this.state.userDocument != Fire.userDocument)
                   this.setState({userDocument: Fire.userDocument})

如果动作在{Profile}，如果它在子进程之一中，则将该功能和状态作为道具发送，或者当然将Redux添加到项目中，然后将状态存储在该项目中，然后将组件连接到store并进行更新自动

React-native，firestore：当实例变量更改其值时如何更新组件状态

2 个答案: