Проблемы при переписывании функции asyn c в функциональный компонент реагирующий на перехват - PullRequest
0 голосов
/ 01 марта 2020

У меня есть несколько форм в моем приложении Reaction / redux / firestore, и ранее я мог использовать повторно используемый асиновый c компонент для обработки отправки данных в firestore. Поскольку я обновил пакеты react-redux, react-redux-firebase и redux-firestore, мой обработчик форм не работает с ошибкой «Firebase не инициализирован». Поэтому я пытаюсь переписать обработчик формы с помощью ловушек, но не могу понять, как использовать useFirestore и useDispatch для замены getFirestore и dispatch и await в повторно используемом функциональном компоненте, который не отображает что угодно.

Это был мой старый handleFormAdd компонент

import {getFirestore} from 'redux-firestore'
import {history} from '../routes/AppRouter'

export const handleFormAdd = (
  {formName, formData, geoData, images = []},
  status
) => async dispatch => {
  const firestore = getFirestore()
  dispatch({
    type: 'ENQUEUE_SNACKBAR',
    notification: {
      key: new Date().getTime() + Math.random(),
      message: 'Creating...',
      options: {
        variant: 'info'
      }
    }
  })
  try {
    if (navigator.onLine === true) {
      const res = await firestore.add(
        {collection: formName},
        {...formData, images}
      )
      if (formData.longitude && formData.latitude) {
        await firestore.set({collection: 'geopoints', doc: res.id}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created',
          options: {
            variant: 'success'
          }
        }
      })
    }
    if (navigator.onLine === false) {
      const docID = cuid()
      firestore.set({collection: formName, doc: docID}, {...formData, images})
      if (formData.longitude && formData.latitude) {
        firestore.set({collection: 'geopoints', doc: docID}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created offline',
          options: {
            variant: 'success'
          }
        }
      })
    }
    history.goBack()
  } catch (e) {
    dispatch({
      type: 'ENQUEUE_SNACKBAR',
      notification: {
        key: new Date().getTime() + Math.random(),
        message: 'Form creation failed' + e,
        options: {
          variant: 'error'
        }
      }
    })
  }
}

И это моя попытка преобразовать его в ловушку, которая выдает «ошибку правила прерывания ловушек».

import { useFirestore } from 'react-redux-firebase'
import { useDispatch } from 'react-redux';
import {history} from '../routes/AppRouter'

export const handleFormAdd = ( {formName, formData, geoData, images = []}) => {
  const firestore = useFirestore()
  const dispatch = useDispatch()
  dispatch({
    type: 'ENQUEUE_SNACKBAR',
    notification: {
      key: new Date().getTime() + Math.random(),
      message: 'Creating...',
      options: {
        variant: 'info'
      }
    }
  })
  try {
    if (navigator.onLine === true) {
      const res =  firestore.add(
        {collection: formName},
        {...formData, images}
      )
      if (formData.longitude && formData.latitude) {
         firestore.set({collection: 'geopoints', doc: res.id}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created',
          options: {
            variant: 'success'
          }
        }
      })
    }
    if (navigator.onLine === false) {
      const docID = cuid()
      firestore.set({collection: formName, doc: docID}, {...formData, images})
      if (formData.longitude && formData.latitude) {
        firestore.set({collection: 'geopoints', doc: docID}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created offline',
          options: {
            variant: 'success'
          }
        }
      })
    }
    history.goBack()
  } catch (e) {
    dispatch({
      type: 'ENQUEUE_SNACKBAR',
      notification: {
        key: new Date().getTime() + Math.random(),
        message: 'Form creation failed' + e,
        options: {
          variant: 'error'
        }
      }
    })
  }
}

Буду признателен за любую помощь, чтобы помочь мне в этом, спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...