在 useEffect 中分配的全局变量不能在其他函数中使用

Question

我有以下代码，可在单击按钮后将一些数据发送到我的 firebase 数据库。但是，每当我单击它时，我都会收到一条错误消息 TypeError: Cannot read property 'collection' of undefined。奇怪的是，如果我 post 不写任何内容，它就可以正常工作。我的代码如下：

// import statements

function ComponentName(props) {
// declare and assign useStates

var db;
    useEffect(() => {
        // Initialize Firebase
        firebase.initializeApp({firebaseConfig});
        setFirebaseInitialized(true);
        db = firebase.firestore();
    }, []);


    function sendPostToFirebase() {
        db.collection("blogPosts").add({ // These three variables below are states
            author: blogPostAuthor,
            title: blogPostTitle,
            content: blogPostContent,
            datePublished: Date.now(),
            dateLastEdited: Date.now()
        })
            .then(function (docRef) {
                console.log("Document written with ID: ", docRef.id);
                alert("Successfully posted!");

            })
            .catch(function (error) {
                console.error("Error adding document: ", error);
                alert("ERROR: " + error);
            });
    };

    // return HTML stuff
}

看来问题出在 useEffect 挂钩中没有更新 db 变量。

我已确定将 db 声明为全局变量。我怀疑它不起作用的原因与 useEffect 内部的赋值有关，但我不确定是否如此，或者如何修复它。

如有任何帮助，我们将不胜感激！

Answer 1

我通过摆脱 useEffect 并为 firebaseDB 初始化事情制作一个单独的 js 文件，设法自己解决了这个问题。这是：

firebaseDB.js:

import * as firebase from 'firebase'
import 'firebase/firestore';

const config = {
// put your config here

};

export default !firebase.apps.length
    ? firebase.initializeApp(config).firestore()
    : firebase.app().firestore();

在BlogEditorComponent.jsx中：

import db from "./firebaseDB

并正常处理数据库。

在 useEffect 中分配的全局变量不能在其他函数中使用

Global variable assigned in useEffect cannot be used in other function

firebase

reactjs

google-cloud-firestore

use-state