我想弄清楚如何使用 Firebase 侦听器，以便使用 React 挂钩更新来刷新云 Firestore 数据。

最初，我使用带有 componentDidMount 函数的类组件来获取 firestore 数据。

this.props.firebase.db
    .collection('users')
    // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid))
.doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid))
.get()
.then(doc => {
    this.setState({ name: doc.data().name });
    // loading: false,
  });  
}

当页面更新时会中断，所以我试图弄清楚如何移动侦听器以响应钩子。

我已经安装了react-firebase-hooks工具 - 尽管我不知道如何阅读说明才能让它工作。

我有一个功能组件如下：

import React, { useState, useEffect } from 'react';
import { useDocument } from 'react-firebase-hooks/firestore';

import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    useRouteMatch,
 } from 'react-router-dom';
import * as ROUTES from '../../constants/Routes';
import { compose } from 'recompose';
import { withFirebase } from '../Firebase/Index';
import { AuthUserContext, withAuthorization, withEmailVerification, withAuthentication } from '../Session/Index';

function Dashboard2(authUser) {
    const FirestoreDocument = () => {

        const [value, loading, error] = useDocument(
          Firebase.db.doc(authUser.uid),
          //firebase.db.doc(authUser.uid),
          //firebase.firestore.doc(authUser.uid),
          {
            snapshotListenOptions: { includeMetadataChanges: true },
          }
        );
    return (

        <div>    



                <p>
                    {error && <strong>Error: {JSON.stringify(error)}</strong>}
                    {loading && <span>Document: Loading...</span>}
                    {value && <span>Document: {JSON.stringify(value.data())}</span>}
                </p>




        </div>

    );
  }
}

export default withAuthentication(Dashboard2);

这个组件在路由级别被包装在一个 authUser 包装器中，如下所示：

<Route path={ROUTES.DASHBOARD2} render={props => (
          <AuthUserContext.Consumer>
             { authUser => ( 
                <Dashboard2 authUser={authUser} {...props} />  
             )}
          </AuthUserContext.Consumer>
        )} />

我有一个 firebase.js 文件，它插入到 firestore 中，如下所示：

class Firebase {
  constructor() {
    app.initializeApp(config).firestore();
    /* helpers */
    this.fieldValue = app.firestore.FieldValue;


    /* Firebase APIs */
    this.auth = app.auth();
    this.db = app.firestore();


  }

它还定义了一个侦听器以了解 authUser 何时更改：

onAuthUserListener(next, fallback) {
    // onUserDataListener(next, fallback) {
      return this.auth.onAuthStateChanged(authUser => {
        if (authUser) {
          this.user(authUser.uid)
            .get()
            .then(snapshot => {
            let snapshotData = snapshot.data();

            let userData = {
              ...snapshotData, // snapshotData first so it doesn't override information from authUser object
              uid: authUser.uid,
              email: authUser.email,
              emailVerified: authUser.emailVerifed,
              providerData: authUser.providerData
            };

            setTimeout(() => next(userData), 0); // escapes this Promise's error handler
          })

          .catch(err => {
            // TODO: Handle error?
            console.error('An error occured -> ', err.code ? err.code + ': ' + err.message : (err.message || err));
            setTimeout(fallback, 0); // escapes this Promise's error handler
          });

        };
        if (!authUser) {
          // user not logged in, call fallback handler
          fallback();
          return;
        }
    });
  };

然后，在我的 firebase 上下文设置中，我有：

import FirebaseContext, { withFirebase } from './Context';
import Firebase from '../../firebase';
export default Firebase;
export { FirebaseContext, withFirebase };

上下文在 withFirebase 包装器中设置，如下所示：

import React from 'react';
const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);
export default FirebaseContext;

然后，在我的 withAuthentication HOC 中，我有一个上下文提供程序：

import React from 'react';
import { AuthUserContext } from '../Session/Index';
import { withFirebase } from '../Firebase/Index';

const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authUser: null,
      };  
    }

    componentDidMount() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
        authUser => {
           authUser
            ? this.setState({ authUser })
            : this.setState({ authUser: null });
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    };  

    render() {
      return (
        <AuthUserContext.Provider value={this.state.authUser}>
          <Component {...this.props} />
        </AuthUserContext.Provider>
      );
    }
  }
  return withFirebase(WithAuthentication);

};
export default withAuthentication;

目前 - 当我尝试这个时，我在 Dashboard2 组件中收到一个错误消息：

Firebase' 未定义

我试过小写的 firebase 并得到同样的错误。

我也试过 firebase.firestore 和 Firebase.firestore。我犯了同样的错误。

我想知道我的 HOC 是否不能与函数组件一起使用？

我看过这个演示应用程序和这篇博文。

按照博客中的建议，我创建了一个新的 firebase/contextReader.jsx：

 import React, { useEffect, useContext } from 'react';
import Firebase from '../../firebase';



export const userContext = React.createContext({
    user: null,
  })

export const useSession = () => {
    const { user } = useContext(userContext)
    return user
  }

  export const useAuth = () => {
    const [state, setState] = React.useState(() => 
        { const user = firebase.auth().currentUser 
            return { initializing: !user, user, } 
        }
    );
    function onChange(user) {
      setState({ initializing: false, user })
    }

    React.useEffect(() => {
      // listen for auth state changes
      const unsubscribe = firebase.auth().onAuthStateChanged(onChange)
      // unsubscribe to the listener when unmounting
      return () => unsubscribe()
    }, [])

    return state
  }  

然后我尝试将我的 App.jsx 包装在该阅读器中：

function App() {
  const { initializing, user } = useAuth()
  if (initializing) {
    return <div>Loading</div>
  }

    // )
// }
// const App = () => (
  return (
    <userContext.Provider value={{ user }}> 


    <Router>
        <Navigation />
        <Route path={ROUTES.LANDING} exact component={StandardLanding} />

当我尝试这个时，我收到一条错误消息：

类型错误：_firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth 不是函数

我看过这篇处理该错误的帖子，并尝试卸载并重新安装纱线。没有什么不同的。

当我查看演示应用程序时，它表明应该使用“接口”方法创建上下文。我看不出这是从哪里来的 - 我在文档中找不到解释它的参考。

除了尝试我为插入它所做的工作之外，我无法理解这些说明。

我看过这篇文章，它试图在不使用 react-firebase-hooks 的情况下收听 firestore。答案指向试图弄清楚如何使用这个工具。

我已经阅读了这个很好的解释，其中介绍了如何从 HOC 转移到钩子。我被困在如何集成 firebase 侦听器上。

我看过这篇文章，它为如何考虑这样做提供了一个有用的例子。不确定我是否应该在 authListener componentDidMount 或尝试使用它的 Dashboard 组件中尝试执行此操作。

下一次尝试 我找到了这篇文章，它试图解决同样的问题。

当我尝试实施 Shubham Khatri 提供的解决方案时，我按如下方式设置了 firebase 配置：

上下文提供者：import React, {useContext} from 'react'; 从'../../firebase' 导入 Firebase；

const FirebaseContext = React.createContext(); 

export const FirebaseProvider = (props) => ( 
   <FirebaseContext.Provider value={new Firebase()}> 
      {props.children} 
   </FirebaseContext.Provider> 
); 

然后上下文挂钩具有：

import React, { useEffect, useContext, useState } from 'react';

const useFirebaseAuthentication = (firebase) => {
    const [authUser, setAuthUser] = useState(null);

    useEffect(() =>{
       const unlisten = 
firebase.auth.onAuthStateChanged(
          authUser => {
            authUser
              ? setAuthUser(authUser)
              : setAuthUser(null);
          },
       );
       return () => {
           unlisten();
       }
    });

    return authUser
}

export default useFirebaseAuthentication;

然后在 index.js 中，我将应用程序包装在提供程序中：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/Index';
import {FirebaseProvider} from './components/Firebase/ContextHookProvider';

import * as serviceWorker from './serviceWorker';


ReactDOM.render(

    <FirebaseProvider> 
    <App /> 
    </FirebaseProvider>,
    document.getElementById('root')
);

    serviceWorker.unregister();

然后，当我尝试在组件中使用侦听器时，我有：

import React, {useContext} from 'react';
import { FirebaseContext } from '../Firebase/ContextHookProvider';
import useFirebaseAuthentication from '../Firebase/ContextHook';


const Dashboard2 = (props) => {
    const firebase = useContext(FirebaseContext);
    const authUser = 
useFirebaseAuthentication(firebase);

    return (
        <div>authUser.email</div>
    )
 }

 export default Dashboard2;

我尝试将它用作没有组件或身份验证包装器的路由：

<Route path={ROUTES.DASHBOARD2} component={Dashboard2} />

当我尝试这个时，我收到一条错误消息：

尝试导入错误：“FirebaseContext”未从“../Firebase/ContextHookProvider”导出。

该错误消息是有道理的，因为 ContextHookProvider 不导出 FirebaseContext - 它导出 FirebaseProvider - 但如果我不尝试在 Dashboard2 中导入它 - 那么我将无法在尝试使用它的函数中访问它。

这种尝试的一个副作用是我的注册方法不再有效。现在它会生成一条错误消息，内容为：

类型错误：无法读取 null 的属性“doCreateUserWithEmailAndPassword”

我稍后会解决这个问题 - 但必须有一种方法来弄清楚如何使用 react with firebase 不涉及数月的这个循环，通过数百万条无法获得基本身份验证设置的途径。是否有适用于react-hooks的 firebase (firestore) 入门套件？

下一次尝试 我尝试遵循此udemy 课程中的方法- 但它只能用于生成表单输入 - 没有侦听器可以围绕经过身份验证的用户调整路由。

我试图遵循这个youtube 教程中的方法- 有这个repo可以使用。它展示了如何使用钩子，但没有展示如何使用上下文。

下一次尝试 我发现这个 repo似乎有一个深思熟虑的方法来使用带 firestore 的钩子。但是，我无法理解代码。

我克隆了它 - 并尝试添加所有公共文件，然后当我运行它时 - 我实际上无法让代码运行。我不确定如何让它运行的说明中缺少什么，以便查看代码中是否有可以帮助解决此问题的课程。

下一次尝试

我购买了 divjoy 模板，它被宣传为为 firebase 设置（它不是为 firestore 设置的，以防其他人考虑将此作为一个选项）。

该模板提出了一个 auth 包装器，用于初始化应用程序的配置 - 但仅用于 auth 方法 - 因此需要对其进行重组以允许另一个用于 firestore 的上下文提供程序。当你蒙混过关该过程，并使用所示的处理这个帖子，剩下的就是在下面的回调的错误：

useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

它不知道firebase是什么。那是因为它是在 firebase 上下文提供程序中定义的，该提供程序被导入和定义（在 useProvideAuth() 函数中）为：

  const firebase = useContext(FirebaseContext)

没有机会回调，错误说：

React Hook useEffect 缺少依赖项：'firebase'。包含它或删除依赖项数组

或者，如果我尝试将该常量添加到回调中，则会收到一条错误消息：

React Hook "useContext" 不能在回调中调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

下一次尝试

我已将我的 firebase 配置文件缩减为仅配置变量（我将在我想使用的每个上下文的上下文提供程序中编写帮助程序）。

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const devConfig = {
    apiKey: process.env.REACT_APP_DEV_API_KEY,
    authDomain: process.env.REACT_APP_DEV_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DEV_DATABASE_URL,
    projectId: process.env.REACT_APP_DEV_PROJECT_ID,
    storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_DEV_APP_ID

  };


  const prodConfig = {
    apiKey: process.env.REACT_APP_PROD_API_KEY,
    authDomain: process.env.REACT_APP_PROD_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_PROD_DATABASE_URL,
    projectId: process.env.REACT_APP_PROD_PROJECT_ID,
    storageBucket: process.env.REACT_APP_PROD_STORAGE_BUCKET,
    messagingSenderId: 
process.env.REACT_APP_PROD_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_PROD_APP_ID
  };

  const config =
    process.env.NODE_ENV === 'production' ? prodConfig : devConfig;


class Firebase {
  constructor() {
    firebase.initializeApp(config);
    this.firebase = firebase;
    this.firestore = firebase.firestore();
    this.auth = firebase.auth();
  }
};

export default Firebase;  

然后我有一个身份验证上下文提供程序，如下所示：

import React, { useState, useEffect, useContext, createContext } from "react";
import Firebase from "../firebase";

const authContext = createContext();

// Provider component that wraps app and makes auth object ...
// ... available to any child component that calls useAuth().
export function ProvideAuth({ children }) {
  const auth = useProvideAuth();

  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

// Hook for child components to get the auth object ...
// ... and update when it changes.
export const useAuth = () => {

  return useContext(authContext);
};

// Provider hook that creates auth object and handles state
function useProvideAuth() {
  const [user, setUser] = useState(null);


  const signup = (email, password) => {
    return Firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };

  const signin = (email, password) => {
    return Firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };



  const signout = () => {
    return Firebase
      .auth()
      .signOut()
      .then(() => {
        setUser(false);
      });
  };

  const sendPasswordResetEmail = email => {
    return Firebase
      .auth()
      .sendPasswordResetEmail(email)
      .then(() => {
        return true;
      });
  };

  const confirmPasswordReset = (password, code) => {
    // Get code from query string object
    const resetCode = code || getFromQueryString("oobCode");

    return Firebase
      .auth()
      .confirmPasswordReset(resetCode, password)
      .then(() => {
        return true;
      });
  };

  // Subscribe to user on mount
  useEffect(() => {

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

    // Subscription unsubscribe function
    return () => unsubscribe();
  }, []);

  return {
    user,
    signup,
    signin,
    signout,
    sendPasswordResetEmail,
    confirmPasswordReset
  };
}

const getFromQueryString = key => {
  return queryString.parse(window.location.search)[key];
};

我还制作了一个 firebase 上下文提供程序，如下所示：

import React, { createContext } from 'react';
import Firebase from "../../firebase";

const FirebaseContext = createContext(null)
export { FirebaseContext }


export default ({ children }) => {

    return (
      <FirebaseContext.Provider value={ Firebase }>
        { children }
      </FirebaseContext.Provider>
    )
  }

然后，在 index.js 中，我将应用程序包装在 firebase 提供程序中

ReactDom.render(
    <FirebaseProvider>
        <App />
    </FirebaseProvider>, 
document.getElementById("root"));

serviceWorker.unregister();

在我的路线列表中，我已将相关路线包装在身份验证提供程序中：

import React from "react";
import IndexPage from "./index";
import { Switch, Route, Router } from "./../util/router.js";

import { ProvideAuth } from "./../util/auth.js";

function App(props) {
  return (
    <ProvideAuth>
      <Router>
        <Switch>
          <Route exact path="/" component={IndexPage} />

          <Route
            component={({ location }) => {
              return (
                <div
                  style={{
                    padding: "50px",
                    width: "100%",
                    textAlign: "center"
                  }}
                >
                  The page <code>{location.pathname}</code> could not be found.
                </div>
              );
            }}
          />
        </Switch>
      </Router>
    </ProvideAuth>
  );
}

export default App;

在这个特殊的尝试中，我又回到了之前用这个错误标记的问题：

类型错误：_firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth 不是函数

它指出身份验证提供程序的这一行是造成问题的原因：

useEffect(() => {

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

我曾尝试在 Firebase 中使用大写的 F 并产生相同的错误。

当我尝试 Tristan 的建议时，我删除了所有这些东西，并尝试将我的取消订阅方法定义为一个不听的方法（我不知道他为什么不使用 firebase 语言 - 但如果他的方法有效，我会更加努力找出原因）。当我尝试使用他的解决方案时，错误消息说：

类型错误：_util_contexts_Firebase__WEBPACK_IMPORTED_MODULE_8___default(...) 不是函数

这篇文章的答案建议从 after auth 中删除 ()。当我尝试这样做时，我收到一条错误消息：

类型错误：无法读取未定义的属性“onAuthStateChanged”

但是，这篇文章表明在 auth 文件中导入 firebase 的方式存在问题。

我将其导入为：从“../firebase”导入 Firebase；

Firebase 是类的名称。

特里斯坦推荐的视频是有用的背景，但我目前在第 9 集，仍然没有找到应该有助于解决这个问题的部分。有谁知道在哪里可以找到它？

下 一个尝试 接下来 - 并且仅尝试解决上下文问题 - 我已经导入了 createContext 和 useContext 并尝试使用它们，如本文档中所示。

我无法通过一个错误说：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：...

我已经通过此链接中的建议尝试解决此问题，但无法弄清楚。我没有遇到本故障排除指南中显示的任何问题。

当前 - 上下文语句如下所示：

import React, {  useContext } from 'react';
import Firebase from "../../firebase";


  export const FirebaseContext = React.createContext();

  export const useFirebase = useContext(FirebaseContext);

  export const FirebaseProvider = props => (
    <FirebaseContext.Provider value={new Firebase()}>
      {props.children}
    </FirebaseContext.Provider>
  );  

我花了一些时间使用这个udemy 课程来尝试找出这个问题的上下文和钩子元素 - 在观看之后 - 下面 Tristan 提出的解决方案的唯一方面是在他的帖子中没有正确调用 createContext 方法。它需要是“React.createContext”，但它仍然无法解决问题。

我还是卡住了。

谁能看到这里出了什么问题？