React + Firestore:从查询返回变量 [英] React + Firestore : Return a variable from a query

问题描述

我目前正在学习React和Firestore，有点卡住了.我正在尝试通过搜索用户的uid从Firestore集合中检索用户名.

I'm learning React and Firestore currently and am a bit stuck. I'm trying to retrieve a users name from a firestore collection by searching their uid.

以下代码在课程"映射中执行以创建列表.

The following code is executed in a map of 'lessons' to create a list.

{lesson.post_author && findName(lesson.post_author)}

以下代码是findName函数.

The following code is the findName function.

let findName = uid => {
    firebase.firestore().collection("users")
      .where('uid', '==', uid)
      .get()
      .then(querySnapshot => {
          console.log(querySnapshot.docs[0].data().name);
    });

  };

当前，findName函数将控制台所有名称成功登录到控制台.我已经更改了代码，以便能够在firestore调用之外进行控制台日志记录，但是这会返回在控制台中待处理的Promise.

Currently, the findName function will console log all of the names to the console successfully. I've altered the code to be able to console log outside of the firestore call, but that returns a promise pending in console.

代码的目标是返回名称，而不是列表中的uid.

The goal of the code is to return the name rather then the uid in the list.

任何帮助将不胜感激. 谢谢！

Any help would be much appreciated. Thank you!

推荐答案

正如其他人所解释的，您不能返回该值，因为它是从Firestore异步加载的.到return运行时，数据尚未加载.

As others have explained, you can't return that value, since it's loaded from Firestore asynchronously. By the time your return runs, the data hasn't loaded yet.

在React中，您可以通过将数据置于组件状态并从那里使用来处理此问题.如果这样做，您的render方法可以简单地从状态中将其拾取，例如:

In React you handle this by putting the data in the component's state, and using it from there. If you do this, your render method can simply pick it up from the state, with something like:

{lesson.post_author && findName(lesson.post_author_name)}

(以上假设lesson间接来自该状态.

(the above assumes that lesson indirectly comes from the state.

如果我们假装只有一堂课，而您在状态中直接拥有这些值，则会容易一些.

It's a bit easier if we pretend there's only one lesson, and you have these values straight in the state:

{state.post_author && findName(state.post_author_name)}

现在，我假设您已经拥有post_author，您只需要查找作者的姓名.这意味着componentDidMount中/之后的某处，您将加载其他数据并将其添加到状态:

Now I'll assume you already have the post_author and you just need to look up the author's name. That means that somewhere in/after componentDidMount you'll load the additional data and add it to the state:

componentDidMount() {
  firebase.firestore().collection("users")
    .where('uid', '==', this.state.uid)
    .get()
    .then(querySnapshot => {
      this.setState({ post_user_name: querySnapshot.docs[0].data().name });
  });
}

现在，数据的加载仍是异步进行的，因此对setState()的调用在componentDidMount完成后的某个时间发生.但是React知道改变状态可能需要刷新组件，因此它通过重新呈现来响应对setState()的调用.

Now the loading of the data still happens asynchronously, so the call to setState() happens some time after componentDidMount has completed. But React is aware that changing the state may require a refresh of the component, so it responds to the call to setState() by rerendering it.

请注意，我强烈建议使用每个用户的UID作为users中文档的ID.这样一来，您无需查询即可直接进行查找:

Note that I'd highly recommend using each user's UID as the ID of the documents in users. That way you don't need a query and can just do a directly lookup:

componentDidMount() {
  firebase.firestore().collection("users")
    .doc(this.state.uid)
    .get()
    .then(doc => {
      this.setState({ post_user_name: doc.data().name });
  });
}

这篇关于React + Firestore:从查询返回变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！