时间戳

首页 > 解决方案 > React + Firestore：从查询中返回一个变量

javascript - React + Firestore：从查询中返回一个变量

问题描述

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

以下代码在“课程”地图中执行以创建列表。

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

下面的代码是 findName 函数。

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

  };

目前，findName 函数将成功将所有名称记录到控制台。我已经更改了代码，以便能够在 firestore 调用之外进行控制台日志，但这会返回一个在控制台中挂起的承诺。

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

任何帮助将非常感激。谢谢！

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

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

在 React 中，您通过将数据置于组件的状态中并从那里使用它来处理此问题。如果您这样做，您的渲染方法可以简单地从状态中获取它，例如：

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

（以上假设lesson间接来自国家。

如果我们假装只有一节课，这会更容易一些，并且您在状态中直接拥有这些值：

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

现在我假设你已经有了post_author，你只需要查找作者的名字。这意味着在某处/之后componentDidMount您将加载附加数据并将其添加到状态：

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()渲染来响应调用。

请注意，我强烈建议使用每个用户的 UID 作为users. 这样您就不需要查询，只需直接查找即可：

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

推荐阅读