如何将 componentDidMount 内的异步函数“翻译”为 UseEffect 内的异步函数？答案

【问题标题】：How to 'translate' an async function inside of componentDidMount to an async function inside of UseEffect?如何将 componentDidMount 内的异步函数“翻译”为 UseEffect 内的异步函数？
【发布时间】：2020-05-11 18:21:17
【问题描述】：

我正在观看有关 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'

【问题讨论】：

你写的方式其实是对的
所以这只能意味着我没有正确使用 firebase/firestore（因为返回值）。有什么想法吗？
这两种情况下你如何创建fireStore
@ShubhamKhatri 编辑了问题以（希望）反映这一点

标签： reactjs firebase promise google-cloud-firestore react-hooks

【解决方案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]);

【讨论】：

【解决方案2】：

你可以使用onSnapshot来摆脱异步的需要，

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

【讨论】：