尝试将 Firebase 中的数据添加到平面列表中

Posted 2023-02-16

【中文标题】尝试将 Firebase 中的数据添加到平面列表中

【英文标题】：Trying to add data from Firebase into a flatlist

【发布时间】：2022-01-22 22:51:34

【问题描述】：

您好，我对 react 和 firebase 很陌生，并且一直在学习一些教程，但我很迷茫。我正在努力将我的 firebase 数据库中的数据添加到我的平面列表中。我收到错误 [未处理的承诺拒绝：TypeError：_firestore.doc.data 不是函数。 （在 '_firestore.doc.data()' 中，'_firestore.doc.data' 是未定义的）] 不知道下一步该做什么？

`const getQuiz = async () => 
    const ref = db.collection('QuizzesList');
    const doc = await ref.get();
    const quizObject = doc.data();
    const newQuiz = [...quizzes, name: quizObject.name, 
description:quizObject.description,
        screenName:quizObject.screenName, image:quizObject.image]
    setQuizzes(newQuiz)

useEffect(()=> 
    getQuiz();
, [])

const Item = (name,description,screenName,image) => (
    <View style=searchScreen.quizContainer>
        <ImageBackground
            source=image
            style=searchScreen.image
        />

        <View style=searchScreen.titles>
            <Text style=searchScreen.title>name</Text>
            <Text style=searchScreen.subtitle>description&nbsp; 
</Text>
        </View>

        <View style=searchScreen.buttonsContainer >
            <StyledButton
                content="Cychwyn y Cwis"
                onPress=() => navigation.navigate(screenName)/>
        </View>


    </View>
 );

 const renderItem = (item) => (
    <Item name=item.name description=item.description screenName= 
item.screenName image=item.image/>
)

return(
    <View style=searchScreen.quizContainer>
        <FlatList
            data=quizzes
            renderItem=renderItem
            keyExtractor=item => item.id

            showsVerticalScrollIndicator=false
            snapToAlignment='start'
            decelerationRate='fast'
            snapToInterval=Dimensions.get('window').height
        />
    </View>
)` 

尝试提供的答案后我的代码：

const getQuiz = async () => 
    const ref = db.collection('QuizzesList');
    const snapshot = await ref.get();
    snapshot.forEach((doc) => 
        const quizObject = doc.data();
        const newQuiz = [...quizzes, name: quizObject.name, 
description:quizObject.description,
            screenName:quizObject.screenName, 
image:quizObject.image]
        setQuizzes(newQuiz)
    )
useEffect(()=> 
    getQuiz();
, [])

新的错误信息：

'[Unhandled promise rejection: TypeError: 
_firebaseConfig.db.collection is 
not a function. (In '_firebaseConfig.db.collection('QuizzesList')', 
'_firebaseConfig.db.collection' is undefine
d)]
at node_modules\@firebase\webchannel-wrapper\dist\index.js:89:122 in 
n.Ia
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:190:16 in 
PromiseImpl$argument_0
at node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\regenerator-runtime\runtime.js:189:15 in 
callInvokeWithMethodAndArg
at node_modules\regenerator-runtime\runtime.js:212:38 in enqueue
at node_modules\regenerator-runtime\runtime.js:239:8 in exports.async
at node_modules\@firebase\webchannel-wrapper\dist\index.js:89:94 in 
<anonymous>
at node_modules\@firebase\webchannel-wrapper\dist\index.js:90:183 in 
ie
at node_modules\react- 
native\Libraries\Renderer\implementations\ReactNativeRenderer- 
dev.js:19280:25 in invokePassiveEffectCreate
at node_modules\react- 
native\Libraries\Renderer\implementations\ReactNativeRenderer- 
dev.js:93:4 
in invokeGuardedCallbackProd
at node_modules\react- 
native\Libraries\Renderer\implementations\ReactNativeRenderer- 
dev.js:318:2 in invokeGuardedCallback
at node_modules\react- 
native\Libraries\Renderer\implementations\ReactNativeRenderer- 
dev.js:19362:29 in flushPassiveEffectsImpl
at node_modules\scheduler\cjs\scheduler.development.js:468:23 in 
unstable_runWithPriority
at node_modules\react- 
native\Libraries\Renderer\implementations\ReactNativeRenderer- 
dev.js:19123:29 in scheduleCallback$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:417:41 in 
workLoop
at node_modules\scheduler\cjs\scheduler.development.js:390:21 in 
flushWork
at node_modules\scheduler\cjs\scheduler.development.js:55:17 in 
_flushCallback
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 
in 
_callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:379:16 
in 
callTimers
at node_modules\react- 

native\Libraries\BatchedBridge\MessageQueue.js:414:4 在 __callFunction 在 node_modules\react- 本机\库\BatchedBridge\MessageQueue.js:113:6 在 __guard$argument_0 在 node_modules\react- __guard 中的 native\Libraries\BatchedBridge\MessageQueue.js:365:10 在 node_modules\react- 本机\库\BatchedBridge\MessageQueue.js:112:4 在 callFunctionReturnFlushedQueue '

我不确定这是否有帮助，但我尝试从 firebase 数据库中提取数据，而不是在平面列表中，它可以工作（见下文）

export default function Testread(navigation) 
const [newName,setNewName] =useState("")
const [newDesc] =useState(0)
const [newScreenName] =useState("")
const [newImage] =useState("")
const [users,setUsers] = useState([]);
const usersCollectionRef = collection(db, "QuizzesList")

const createUser = async () => 
    await addDoc(usersCollectionRef, name: newName, description: newDesc,image: newImage,screenName:newScreenName)


useEffect(() =>
    const getUsers = async () => 

        const data = await getDocs(usersCollectionRef)
        setUsers(data.docs.map((doc)=>(...doc.data(), id: doc.id)))
        console.warn("asdadsffgsAGFsgSDGf")

    
    getUsers()
, [])
return (
    <View style=styles.container>
        <CustomInput placeholder="Username"  setValue=setNewName/>
            <CustomInput placeholder="Age"/>
        <SubmitButton onPress=createUser text="Create"/>

        users.map((users) => return <View>
            <Text>Name:users.name</Text>
            <Text>Age:users.description</Text>
            <Image style=quizScreen.picture source=users.image />
            <Text>ScreenName: users.screenName</Text>
        </View>)
    </View>
);

【参考方案1】：

您在CollectionReference 上调用get，这意味着您可以在QuerySnapshot 中取回该集合中的所有文档。并且查询快照没有 data 属性，这可以解释错误。

要从快照中获取文档，请遍历其docs 属性，例如：

const ref = db.collection('QuizzesList');
const snapshot = await ref.get();
snapshot.forEach((doc) => 
  const quizObject = doc.data();
  ...
)

【讨论】：

我刚刚尝试过这个并更改了原始帖子以反映此更改，但仍然遇到相同的错误。我不知道该怎么办？

似乎不太可能在更改的代码上出现相同的错误。您能否复制/粘贴错误消息和可能的堆栈跟踪。而且：请不要修改您问题中的现有代码，因为现在我的回答已经没有意义了。如果您在进行更改后仍有问题，最坏的情况是在 您最初的问题下进行更新。

我无法在此处填写整个错误消息。然而，这是开始：[未处理的承诺拒绝：TypeError：_firebaseConfig.db.collection 不是函数。 （在 '_firebaseConfig.db.collection('QuizzesList')' 中，'_firebaseConfig.db.collection' 未定义 d)] 在 n.Ia 的 node_modules\@firebase\webchannel-wrapper\dist\index.js:89:122在 node_modules\regenerator-runtime\runtime.js:63:36 在 tryCatch 在 node_modules\regenerator-runtime\runtime.js:294:29 在 node_modules\regenerator-runtime\runtime.js:63:36 在 node_modules 的 tryCatch 中调用\regenerator-runtime\runtime.js:155:27 在调用中

请不要尝试将信息放在评论中。相反：1）将您的问题回滚到其原始内容，2）现在在底部添加一个部分，显示您对我的答案中的代码所做的操作，以及您收到的新错误消息（因为这是一个完全不同的错误消息你以前有过）。

抱歉，堆栈溢出非常新。我现在已经这样做了