Как «преобразовать» функцию asyn c внутри componentDidMount в функцию asyn c внутри UseEffect? - PullRequest
Новая
       45

Как «преобразовать» функцию asyn c внутри componentDidMount в функцию asyn c внутри UseEffect?

0 голосов
/ 29 апреля 2020

Я смотрю курс по 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}

edit: так я создаю магазин 

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'

Ответы [ 2 ]

2 голосов
/ 29 апреля 2020

Решение 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]);
0 голосов
/ 29 апреля 2020

Вы можете использовать onSnapshot, чтобы избавиться от потребности в асин c, 

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

В любом случае, мое предложение для async случаев - это думать с точки зрения then синтаксис или в таком случае метод сборки

...