Question

db。收集不是函数反应 / firestore

2021-09-08

1705

javascript reactjs firebase google-cloud-firestore

尝试使用 React 将 Firestore 实现到 LinkedIn 克隆中。我相信导入 Firebase/firestore 的新方法如下。

firebase.js

import {initializeApp} from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

然后我初始化了 firebase 配置并创建了一个 const db。

firebase.js

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
 

export {db}

我遇到的问题是在我的“Feed.js”文件中，我试图从 firestore 运行一个收集函数，但收到错误。

feed.js

useEffect(() => {
db.collection('posts').onSnapshot(snapshot => (
    setPosts(snapshot.docs.map(doc =>(
        {
            id: doc.id,
            data: doc.data()
        }
    )))
))
},[])

db 已导入 feed.js

import { db } from './firebase';

有没有更新的编写方法？

Answer 1

对我有用的解决方案。

useEffect(() =>{
    const newPost = onSnapshot(collection(db, 'posts'), (snapshot) =>{
    setPosts(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
    });
    return newPost
}, []);

感谢@Frank van Puffelen

Answer 2

在新的模块化 SDK 中，大多数 API 界面都已更改。有关如何从旧命名空间 SDK 迁移代码的文档。

您将使用的大多数相关 Firestore 导出在此处列出。具体来说，您需要使用导出的 collection 和 onSnapshot 函数来替换 Firestore#collection() 和 CollectionReference#onSnapshot() 。

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, onSnapshot } from 'firebase/firestore';

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

useEffect(() => {
  const colRef = collection(db, 'posts');

  const unsubListener = onSnapshot(colRef, snapshot => {
    setPosts(snapshot.docs.map(doc => ({
      id: doc.id,
      data: doc.data()
    })));
  });

  return unsubListener; // <- don't forget to return the unsubscribe function!
},[]);

我建议使用 onSnapshot 的观察者版本，以便您可以优雅地处理错误并提高代码的可读性。

useEffect(() => {
  const colRef = collection(db, 'posts');

  const unsubListener = onSnapshot(colRef, {
    next: (snapshot) => {
      setPosts(snapshot.docs.map(doc => ({
        id: doc.id,
        data: doc.data()
      })));
    },
    error: (err) => {
      // TODO: handle error (signed out? no permission? no connection?)
    }
  });

  return unsubListener; // <- don't forget to return the unsubscribe function!
},[]);

Answer 3

应该是这样的：

onSnapshot(collection(db, 'posts'), (snapshot) => {
    setPosts(snapshot.docs.map((doc) => {
        return {
            id: doc.id,
            data: doc.data()
        }
    })
})

我强烈建议您查看有关从版本 8 升级到模块化 Web SDK 的文档以及有关从 Firestore 读取的文档中的代码示例，因为我们不太可能像这样为您重写所有代码。