从 Firestore 和 setState 检索数据

Posted 2023-02-19

【中文标题】从 Firestore 和 setState 检索数据

【英文标题】：Retrieve data from Firestore, and setState

【发布时间】：2021-06-16 06:47:39

【问题描述】：

export class Diet extends Component 
      constructor(props) 
        super(props);
        this.state = 
          loaded: false,
          Ft: 0,
        ;
      

  async componentDidMount() 
    const id = firebase.auth().currentUser.uid;

    await firebase.firestore
      .collection("users")
      .doc(id)
      .get()
      .then(function (doc) 
        if (doc.exists) 
          this.setState(
            Ft: users.Ft,
          );
         else 
          alert("error");
        
      );
  

您好，我正在尝试从我的 Firestore 文档中检索 Ft 并将值存储在 this.state 中，所以之后我可以在页面后面的表达式中使用它，任何关于我在做什么的想法错了吗？

错误：[Unhandled promise rejection: TypeError: _firebase.default.firestore.collection is not a function. (In '_firebase.default.firestore.collection("users")', '_firebase.default.firestore.collection' is undefined)]

【问题讨论】：

你试过安慰doc.data吗？ Firebase 在 data 内返回一个 array of objects。您可以检查返回的内容并执行console.log(doc.data) 以查看返回的内容，这将帮助您了解如何访问您的data。

尝试查看 doc.data

我对编程和 react native 以及 firebase 非常陌生，如果你能给我一个例子来说明我是如何做到的，那会很有帮助？目前我什至不确定代码是否正确

【参考方案1】：

我想你正在寻找

  async componentDidMount() 
    const id = firebase.auth().currentUser.uid;

    firebase.firestore()
      .collection("users")
      .doc(id)
      .get()
      .then(function (doc) 
        if (doc.exists) 
          this.setState(
            Ft: doc.data().Ft
          );
         else 
          alert("error");
        
      );
  

【讨论】：

我认为问题出在 import firebase，它给了我这个错误：'TypeError:_firebase.default.firestore.collection is not a function'。我正在使用import firebase from 'firebase';

请将错误消息编辑到您的问题中（下面有一个编辑链接），作为堆栈跟踪和您可以用来创建错误的最少代码。一般来说，我强烈建议您花一些时间了解how to create a minimal, complete, verifiable example，因为它包含有关如何最大限度地提高他人帮助您的机会的重要指导。

我会的，谢谢，我编辑了帖子底部有错误

啊，在firestore() 之后，你又错过了()。查看我更新的答案，但也请查看文档firebase.google.com/docs/firestore/quickstart

【参考方案2】：

您可以尝试安慰返回的数据以了解 firestore 返回的内容。您正在做的另一个错误是您将await 与then/catch 一起使用，并且它们不能在同一功能中一起使用。运行这个 sn-p 来纠正错误并检查控制台 firestore 实际返回的内容。

export class Diet extends Component 
      constructor(props) 
        super(props);
        this.state = 
          loaded: false,
          Ft: 0,
        ;
      

  async componentDidMount() 
    const id = firebase.auth().currentUser.uid;

    firebase.firestore
      .collection("users")
      .doc(id)
      .get()
      .then(function (doc) 
        if (doc.exists) 
         console.log(doc.data());
//As you're expecting to get Ft then you can set the state like this
          this.setState(
            Ft: doc.data().Ft
          );
         else 
          alert("error");
        
      );
  

或使用try/catch

export class Diet extends Component 
    constructor(props) 
      super(props);
      this.state = 
        loaded: false,
        Ft: 0,
      ;
    

async componentDidMount() 
  const id = firebase.auth().currentUser.uid;

  let fetchedData = await firebase.firestore.collection("users").doc(id).get()

    try 
        if(fetchedData.exists)
            console.log(fetchedData.data());
//As you're expecting to get Ft then you can set the state like this
          this.setState(
            Ft: doc.data().Ft
          );
        
     catch (error) 
        
        alert("error", error);
    

【讨论】：

当我运行它时显示“可能未处理的承诺拒绝”。类型错误：！ firebase.default.firestore.collection 不是函数

我已经更新了答案。让我知道问题是否已解决。

应该是doc.data()，因为DocumentSnapshot.data是一种方法。

我在代码中打错了字。非常感谢您指出@FrankvanPuffelen。