Question

我正在观看Firebase上的一门课程，该课程使用类组件进行教学，但是我正在使用功能组件。这是老师的方式

componentDidMount = async () => {
  const snapshot = await firestore.collection('posts').get()
  console.log({ snapshot })
}

这就是我尝试过的方法，但是不确定是否正确

useEffect(() => {
    async function getSnapshot() {
      const snapshot = await firestore.collection('posts').get()
      console.log({ snapshot })
    }
    getSnapshot()
  }, [])

我不确定它是否正常运行，因为对于老师来说，返回值为

{snapshot: QuerySnapshot}

我得到了

{snapshot: t}

编辑：这就是我创建商店的方式

import firebase from 'firebase/app'
import 'firebase/firestore'
import { FIREBASE_KEY } from '../constants/Keys'

const firebaseConfig = {
  apiKey: `${FIREBASE_KEY}`,
  authDomain: '...',
  databaseURL: '...', 
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
  measurementId: '...',
}

firebase.initializeApp(firebaseConfig)

export const firestore = firebase.firestore()

export default firebase

并简单地将其导入为

import { firestore } from '../../Firebase/Firebase'

Answer 1

解决方案1：

useEffect(() => {
  const asyncCallback = async () => {
    // async callback
  };

  asyncCallback();
}, [dep]);

解决方案2：

useEffect(() => {(async () => {
  // async IIFE (Immediately Invoked Function Expression)
})()}, [dep]);

解决方案3：

const asyncCallback = useCallback(async () => {
  // async callback
}, [dep]);

useEffect(() => {
  asyncCallback()
}, [asyncCallback]);

Answer 2

您可以使用onSnapshot摆脱对异步的需求，

    firestore.collection('posts').onSnapshot(snapshot => console.log({ snapshot }))

如何将componentDidMount内部的异步函数“转换”为UseEffect内部的异步函数？

2 个答案: