React + Firestore:从查询中返回一个变量

问题描述

我目前正在学习 React 和 Firestore，但有点卡住了.我正在尝试通过搜索用户名从 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 调用之外控制台日志，但这会返回一个在控制台中挂起的承诺.

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 中，您通过将数据置于组件的状态中并从那里使用它来处理此问题.如果你这样做，你的渲染方法可以简单地从状态中提取它，比如:

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:从查询中返回一个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！