Question

例如，我正在尝试使用从我的database.js帮助文件导入到主导航为的类组件中的功能来获取用户的电话号码

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { AuthStack } from "./AuthStack";
import { TabNavigator } from "./TabNavigator";
import { ProfileAuthStack } from "./ProfileAuthStack";
import firebase from "../util/firebase";
import { AppLoading } from "expo";
import { getPhone } from "../util/database";

export default class AppNavigator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: "",
      isLoading: false,
    };
  }

  async componentDidMount() {
    var name, email, phone;
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        name = user.displayName;
        email = user.email;
        phone = getPhone(user.uid);

        console.log(name + " " + email + " " + JSON.stringify(phone));
        this.setState({ user });
      } else {
        console.log("not logged in");
        this.setState({ user: "" });
      }
    });
  }

  render() {
    if (this.state.isLoading) {
      return <AppLoading />;
    } else {
      return (
        <NavigationContainer>
          {this.state.user ? (
            this.state.isAdmin ? (
              <TabNavigator />
            ) : (
              <ProfileAuthStack />
            )
          ) : (
            <AuthStack />
          )}
        </NavigationContainer>
      );
    }
  }
}

这是我的功能：

import firebase from "./firebase";

//THIS IS THE FUNCTION \/
export const getPhone = function (uid) {
  var phone;
  var userRef = firebase.database().ref("users/" + uid);
  userRef.on("value", function (snapshot) {
    phone = snapshot.val().phone;
    return phone;
  });
};

现在我的console.log看起来像这样：

Nikola niko@gmail.com undefined

我不明白为什么我要找回未定义的值而不是值本身我在做什么错了？

我在数据库中的JSON树如下：

{
  "admins" : {
    "lessons" : ""
  },
  "users" : {
    "96GFQRlNQwQOu7zEEx7Gqp94NVq1" : {
      "admin" : false,
      "credit" : 0,
      "injuries" : "",
      "isProfileFilled" : true,
      "isValid" : false,
      "phone" : "123123123"
    }
  }
}

Answer 1

从Firebase异步加载数据。任何需要数据的代码都必须位于回调中或从那里被调用。

您的代码可能是这样的：

export const getPhone = function (uid) {
  var userRef = firebase.database().ref("users/" + uid);
  return userRef.once("value").then(function (snapshot) {
    var phone = snapshot.val().phone;
    return phone;
  });
};

然后：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    name = user.displayName;
    email = user.email;
    getPhone(user.uid).then(function(phone) {
        console.log(name + " " + email + " " + JSON.stringify(phone));
        this.setState({ user });
    });
  } else {
    console.log("not logged in");
    this.setState({ user: "" });
  }
});

因此，这里的更改是：

getPhone函数使用once()而不是on，因为它只需要从数据库中获取一次值。
这意味着我们现在可以使用一次返回的then()，然后通过还从return phone中返回return userRef...使getPhone冒泡。
现在，您对getPhone的呼叫将获得一个诺言，我们将通过一个then()来处理该诺言。在唯一可以安全使用phone的地方，因此我们现在在这里记录它并设置状态。

这是一个非常常见的问题，所以我建议阅读其中的一些内容：

async functions上的MDN文档
How do I return the response from an asynchronous call?
How to return values from async functions using async-await from function?，它使用async和await关键字来减少嵌套。
Best way to retrieve Firebase data and return it, or an alternative way
Firebase query function returns undefined

如何从具有导出功能的Firebase实时数据库中获取用户孩子的价值

1 个答案: