reactjs - Firebase 身份验证和 React Hook - 从钩子(Hook)返回的函数不起作用

Question

我有一个自定义身份验证 Hook ，用于提供用户和加载状态，以及一些基于用户的操作(例如注销)。这是我的代码:

type UserActions = {
  signOut(): Promise<void>;
};

const useUser = (): [
  firebase.User | undefined | null,
  UserActions,
  boolean,
  firebase.auth.Error | undefined
] => {
  const auth = firebase.auth();
  const [firebaseUser, loading, error] = useAuthState(auth);

  return [firebaseUser, { signOut: firebase.auth().signOut }, loading, error];
};

export default useUser;

当我在调用 Hook 后在另一个文件中使用 signOut() 函数时，出现错误 Unhandled Rejection (TypeError): Cannot read property 'then' of undefined.

但是，当我简单地改变我的钩子(Hook)时:

type UserActions = {
  signOut(): Promise<void>;
};

const useUser = (): [
  firebase.User | undefined | null,
  UserActions,
  boolean,
  firebase.auth.Error | undefined
] => {
  const auth = firebase.auth();
  const [firebaseUser, loading, error] = useAuthState(auth);

  const signOut = () => {
    return firebase.auth().signOut();
  };
  return [firebaseUser, { signOut }, loading, error];
};

export default useUser;

这很完美。这两种情况有什么区别？不确定我是否遗漏了有关箭头功能如何工作的内容，或者是否遗漏了有关输入的内容？

谢谢!

Answer 1

这是因为你改变了this的上下文implementation of signOut() 需要它(为简洁起见删除了评论):

fireauth.Auth.prototype.signOut = function() {
  var self = this;
  var p = this.redirectStateIsReady_.then(function() {
    if (self.authEventManager_) {
      self.authEventManager_.clearRedirectResult();
    }
    
    /* ... */
  }
  
  return this.registerPendingPromise_(p);
}

在您的第一次尝试中，您使用:

{ signOut: firebase.auth().signOut }

这有效地创造了:

{
  signOut() {
    var self = this;
    var p = this.redirectStateIsReady_.then(function() {
      if (self.authEventManager_) {
        self.authEventManager_.clearRedirectResult();
      }
    
      /* ... */
    }
  
    return this.registerPendingPromise_(p);
  }
}

在该代码块中，this (和 self )不再是 FirebaseAuth 的实例类，但是你的对象的形状是{ signOut: () => Promise<void> }吗？ .当您调用 signOut() 时会引发错误因为像 redirectStateIsReady_ 这样的属性和 authEventManager_该对象上不存在(它们将是 undefined )。

这个错误:

Unhandled Rejection (TypeError): Cannot read property 'then' of undefined

被抛出是因为 yourObject.redirectStateIsReady_是undefined ，这意味着代码尝试(但失败了)调用 (undefined).then() .

在您的第二次(简化)尝试中，您使用:

const signOut = () => firebase.auth().signOut();

在这种情况下，signOut方法还没有脱离它的 FirebaseAuth类和预期的功能。这被称为“绑定(bind)”一个函数，在箭头函数使它变得更容易之前，这是通过使用:

const obj = firebase.auth();
const signOut = obj.signOut.bind(obj);