Как исправить «Uncaught TypeError: обратный вызов не является функцией», выдаваемый ловушкой useEffect - PullRequest
Новая
       55

Как исправить «Uncaught TypeError: обратный вызов не является функцией», выдаваемый ловушкой useEffect

0 голосов
/ 15 мая 2019

У меня проблема с хуком useEffect. В следующем коде первый эффект запускает действие излишка, которое инициализирует базу данных Firebase, и, если вошел пользователь, оно помещает свои данные в хранилище избыточности. Это запускает обновление в компоненте, и второй эффект пытается выполнить повторно, и я получаю журнал консоли, но также появляется ошибка «обратный вызов не является функцией». После этого свойство initFinished имеет значение true, поэтому эффект срабатывает снова, и на этот раз я получаю только ошибку

Журналы 


init effect
navigate out effect false empty
render false WOMCMplIduMFRtRM2VssaMgJ2sL2
Uncaught TypeError: callback is not a function
navigate out effect false WOMCMplIduMFRtRM2VssaMgJ2sL2
render true WOMCMplIduMFRtRM2VssaMgJ2sL2
Uncaught TypeError: callback is not a function

Я попытался добавить / удалить deps из массива зависимостей эффекта. И я всегда веду себя одинаково. Поведение остается прежним, даже если единственный код в эффекте - console.log. Эффект запускается в первый раз и выдает ошибку во второй раз.

Код компонента 

import React, { useEffect, useMemo } from 'react'
import { Text, View } from 'react-native'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Services } from '../../../reduxActions'

const AuthLoading = ({ init, authUserId, initFinished, navigation }) => {
  useEffect(() => {
    console.log('init effect')
    init()
  }, [])

  useEffect(() => {
    console.log('navigate out effect', initFinished, authUserId || 'empty')
    if (initFinished) {
      if (authUserId) {
        navigation.navigate('App')
      } else {
        navigation.navigate('Auth')
      }
    }
  }, [authUserId, initFinished])

  console.log('render', initFinished, authUserId || 'empty')
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <Text>{authUserId || 'Loading...'}</Text>
    </View>
  )
}

export default connect(
  ({ services }) => {
    return {
      authUserId:
        services.authUser && services.authUser.uid ? services.authUser.uid : '',
      initFinished: services.initFinished
    }
  },
  dispatch => {
    return {
      init: () => {
        dispatch(Services.Actions.init())
      }
    }
  }
)(AuthLoading)

Зависимость: 

 "dependencies": {
    "@react-native-community/async-storage": "^1.4.0",
    "firebase": "^5.11.1",
    "prop-types": "^15.7.2",
    "rambda": "^2.5.0",
    "react": "16.8.6",
    "react-native": "^0.59.6",
    "react-native-firebase": "^5.3.1",
    "react-native-gesture-handler": "^1.2.1",
    "react-native-vector-icons": "^6.4.2",
    "react-navigation": "^3.9.1",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.2.0"
  },
...