Question

我正在尝试关注this tutorial。

我目前停留在将响应上下文引入Firebase的步骤中。

此代码块是当前问题的来源：

import Firebase, { FirebaseContext } from './components/firebase';

ReactDOM.render(
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
);
serviceWorker.unregister();

尝试此操作时，出现错误消息：

TypeError：_components_firebase__WEBPACK_IMPORTED_MODULE_5 __。default不是构造函数

我看过this post，它与Vue有关，但是说.default错误的原因不是构造函数（不是其余的），是因为不应使用new关键字调用Firebase对象。

我尝试删除新的，但是会生成一条错误消息，提示：

TypeError：Object（...）不是函数

我想知道这是否与本教程为firebase配置应用程序的不寻常方式有关-这与使用构造函数的类有关（仍然不知道为什么这样做）：< / p>

class Firebase {
  constructor() {
    app.initializeApp(config);
    this.auth = app.auth();
    this.db = app.database();
  }
export default Firebase;

将Firebase与React一起使用的人是否知道如何使用上下文API？如果这样做，您是否找到解决此问题的方法？

firebase配置设置文件为：

索引：

import FirebaseContext, { withFirebase } from './Context';
import Firebase from '../../firebase.1';
export default Firebase;
export { FirebaseContext, 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;

下一个尝试

我发现this post，看起来好像是在尝试遵循同一教程。

该方法要求我在firebase.1.js配置文件中重新添加auth方法，以便它现在看起来像这样：

class Firebase {
  constructor() {
    app.initializeApp(config).firestore();
    this.auth = app.auth();
    // this.db = app.database();

    // this.db = app.firebase.database()
    this.db = app.firestore();

  }  

  doCreateUserWithEmailAndPassword = (email, password) =>
    this.auth.createUserWithEmailAndPassword(email, password);  
}

然后，表单中的提交处理程序如下：

handleCreate = values => {
    values.preventDefault();

    const { name, email, password } = this.state;

    Firebase
    .doCreateUserWithEmailAndPassword = (email, password) => {
      return this.auth
        .createUserWithEmailAndPassword(email, password)
        .then((res) => {
        Firebase.firestore().collection("users").doc(res.user.uid).set({
          email: values.email,
          name: values.name,
          role: values.role,
          createdAt: Firebase.FieldValue.serverTimestamp()
        }).then(() => this.history.push(ROUTES.DASHBOARD));
      })
      .catch(err => {
        console.log(err.message);
      });
  };
};

尝试此操作时，我没有收到任何错误，但表单未提交-只是挂起。

下一个尝试

由于FirebaseContext.Consumer包含一行带有小写形式的firebase的行，因此我尝试了上述所有相同的步骤，但是将标题大小写Firebase替换为小写的firebase。我也尝试过this.firebase（我不知道为什么）和this.props.firebase（我看过其他帖子都尝试过，但仍然不知道为什么）。

这些方法都不起作用。

当我尝试在FirebaseContext.Provider上方进行console.log（Firebase）时，我得到了一个很大的日志，其中包含许多以此为开头的下拉菜单：

FirebaseAppImpl {firebase_：{…}，isDeleted_：false，services _：{…}， tokenListeners_：数组（0），analyticsEventRequests_：数组（0），…} 内部：{analytics：{…}，getUid：ƒ，getToken：ƒ， addAuthTokenListener：ƒ，removeAuthTokenListener：ƒ}

此日志中的一个下拉菜单标记为“ options_”，其中包含我的firebase应用凭据。

Answer 1

我认为这可能与问题in my recent other answer有关。

通过简化导入/导出设置，我设法使new Firebase正常工作。

在react应用中，导入现在为：

import { FirebaseContext } from './components/context';
import Firebase from './components/firebase';

在我用教程中的new的定义简单地替换了components/firebase.js中复杂的“导入和重新导出”代码之后，这些导入和class Firebase便开始工作了。

此后，将弹出另一个错误Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).，但这可能是因为我没有遵循整个教程，并且缺少一些配置。

如果没有项目的完整源代码，则很难复制正在处理的所有内容。

这是在App.js之后和安装npx create-react-app react-firebase-authentication之后使用的测试firebase。

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { FirebaseContext } from './components/context';
import Firebase from './components/firebase';

function App() {
    const foo = new Firebase()
    return (
    <div className="App">
      ... omitted ...
    </div>
  );
}

export default App;

Firebase：.default不是构造函数

1 个答案: