在config.js文件中为React Native Expo App检索Firebase数据

Question

我一直在开发一个兼容iOS和Android设备的React Native Expo应用程序。在这个应用程序中，我需要从我的谷歌firebase数据库检索和渲染数据。

我想把我的firebase代码重写成config.js文件，因为目前我在每个应用程序屏幕内都有firebase脚本，这会导致问题。相反，我想编写一个导出数据的config.js文件，允许我通过import语句检索每个屏幕中的数据:

import { CustomerData } from '../app/config.js';

当我使用检索到的'info'数据时，下面的代码(减去export语句)在每个屏幕上都工作得很好。但是，当向屏幕添加新功能时，这会导致问题，并且是检索google firebase数据的低效方法。

我试着写config.js文件，像这样:

import "firebase/firestore";
import * as firebase from "firebase";
import React, { useState, Component, useEffect } from "react";
import "react-native-gesture-handler";
const firebaseConfig = {
apiKey: <My Api Key>,
authDomain: <My AuthDomain>,
projectId: <My Project Id>,
storageBucket: <My storage Bucket>,
messagingSenderId: <Sender Id>,
appId: <App ID>,
measurementId: <Measurement ID>,
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app(); 
}
function GetData() {
const [info, setInfo] = useState([]); // Initial empty array of info

useEffect(() => {
const dbh = firebase.firestore();

dbh
.collection("CustomerDatabase")
.get()
.then((querySnapshot) => {
const info = [];

querySnapshot.forEach((documentSnapshot) => {
info.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setInfo(info);
});
}, []);
export info;

我相信我需要添加一个导出功能，导出检索到的数据- 'info'。但是，我试图将此导出语句放置在脚本中的不同位置，它返回错误

SyntaxError: 'import'和'export'可能只出现在顶层。(44:0)

即使将导出语句放在脚本的开头，我仍然会收到相同的错误。此外，当删除导出状态时，它会抛出错误:

TransformError SyntaxError: Unexpected token (44:15)表明最后一行是罪魁祸首。同样的代码格式也适用于应用程序屏幕。

我如何从config.js文件中导出'info'数据?还是我必须坚持从每个屏幕js文件中检索我的firebase数据?

Answer 1

我运行了这段代码，除了忘记添加大括号来关闭GetData函数之外，似乎没有其他错误

import "firebase/firestore";
import * as firebase from "firebase";
import React, { useState, Component, useEffect } from "react";
import "react-native-gesture-handler";
const firebaseConfig = {
apiKey:"",
authDomain:"",
projectId:"",
storageBucket:"",
messagingSenderId:"",
appId:"",
measurementId:"",
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app(); 
}
function GetData() {
const [info, setInfo] = useState([]); // Initial empty array of info

useEffect(() => {
const dbh = firebase.firestore();

dbh
.collection("CustomerDatabase")
.get()
.then((querySnapshot) => {
const info = [];

querySnapshot.forEach((documentSnapshot) => {
info.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setInfo(info);
});
}, []);
}
export {info};

Answer 2

这是有意义的，因为info不是一个全局变量，你在GetData中将info声明为一个变量，所以如果你想要访问它，你应该在GetData()函数中返回它。然后你现在可以导出GetData，你应该从函数中得到信息。

import "firebase/firestore";
import * as firebase from "firebase";
import React, { useState, Component, useEffect } from "react";
import "react-native-gesture-handler";
const firebaseConfig = {
apiKey:"",
authDomain:"",
projectId:"",
storageBucket:"",
messagingSenderId:"",
appId:"",
measurementId:"",
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app(); 
}
function GetData() {
const [info, setInfo] = useState([]); // Initial empty array of info

useEffect(() => {
const dbh = firebase.firestore();

dbh.collection("CustomerDatabase").get().then((querySnapshot) => {
const info = [];

querySnapshot.forEach((documentSnapshot) => {
info.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setInfo(info);
});
}, []);
return(info);
}
export {info};
//Then wherever you want to use info you can just do this...
import {GetData} from "filepath";
const info = GetData();

Answer 3

我喜欢在我的react应用中导出状态的另一种方式是在我的app. js中定义状态，这样它就可以被我应用中的每个组件访问。下面是我如何为我的应用导出一个包含主题的状态的例子。我把我的状态和它的setter作为道具传递给我的AppRouting组件。然后，每当我有一个组件，我想要访问我的AppRouting中的主题时，我只需这样做:theme={props。主题}setTheme = {props.setTheme}

import { useState } from "react";
import { Box, ThemeProvider, } from "@mui/material";
import { darkTheme } from "./Theming/AppTheme";
import AppRouting from "./Pages/AppRouting";
const App = () => {
const [theme, setTheme] = useState(darkTheme);
return(
<ThemeProvider theme={theme}>
<Box
sx={{
position:"absolute",
width:"100vw",
height:"auto",
minHeight:"100vh",
top:"0",
left:"0",
display:"flex",
backgroundColor:"background.default",
}}
>
<AppRouting 
theme={theme}
setTheme={setTheme}
/>
</Box>
</ThemeProvider>
);
}
export default App;