时间戳

首页 > 解决方案 > 无法访问从 Firestore 获取数据函数中的上下文 api 传递的值

reactjs - 无法访问从 Firestore 获取数据函数中的上下文 api 传递的值

问题描述

所以我试图通过以下代码从我的firestore中获取一些数据

import React, { useContext, useState, useEffect } from 'react';
import { CocktailContext } from '../../context/CocktailContext';
import fire, { db } from '../../Config/firebase';
import RecipeCard from '../RecipeCard/RecipeCard';
import NavBar from '../NavBar/NavBar';

export default function SavedItemPage() {
    const [ content, setContent ] = useState(null);
    const { uid } = useContext(CocktailContext);

    useEffect(() => {
        listenForMessages(uid)
    }, []);

    const listenForMessages = (id) => {
        db.collection('users').doc(id).onSnapshot(function(doc) {
            const allMessages = [];
            allMessages.push(doc.data());
            setContent(allMessages);
            console.log(content);
        });
    };

    return (
        <div>
            <NavBar />
        </div>
    );
}

这里基本上应该发生的是，如下所示的上下文 API，获取 uid 并将其输入到 listenForMessages() 中，然后执行获取内容的工作

 {
    "name": "State",
    "value": null,
    "subHooks": []
  },
  {
    "name": "Context",
    "value": {
      "recipes": "[{…}, {…}, {…}, {…}, {…}, {…}]",
      "searchTerm": "ƒ searchTerm() {}",
      "updateUid": "ƒ updateUid() {}",
      "uid": "MfLXrE5czaYK7fYiTFuqFv9SZV02"
    },
    "subHooks": []
  },
  {
    "name": "Effect",
    "value": "ƒ () {}",
    "subHooks": []
  }
]

麻烦的是，当页面加载时我遇到了这个错误——FirebaseError: Function CollectionReference.doc() 要求它的第一个参数是非空字符串类型，但它是：“”

所以问题是listenForMessages() 无法访问上下文API 中的uid 值。

谁能告诉我如何解决这个问题？

标签： reactjsgoogle-cloud-firestorereact-hooksreact-context

解决方案

我不知道 Firebase 是如何工作的，但 useContext 可能不正确？通常你会这样使用它：

[state, dispatch] = useContext(CocktailContext)

这会给你整个状态。在您提供的状态下，您的状态中有 3 个对象，所以我猜您将通过执行以下操作来访问 uid：

    useEffect(() => listenForMessages(state[1].value.uid));

我看到有一个 ' ] ' 关闭您提供的状态，但一开始什么也没有，只是适应以防我错过节点级别。

推荐阅读