Почему асинхронная / ожидающая часть моего обратного вызова пропускается? - PullRequest
Новая
       27

Почему асинхронная / ожидающая часть моего обратного вызова пропускается?

0 голосов
/ 31 января 2019

Моя функция обратного вызова "login" вызывается правильно, когда onSubmit вызывается в моем компоненте LoginForm, но часть кода async / await пропускается.Console.log 1 и 2 вызываются, и я вижу их в консоли, но console.log 3, который находится внутри части кода async / await, никогда не запускается.Он пропускается, а затем вызывается console.log 4.Любая помощь будет принята с благодарностью. 

import React from 'react';
import { Form, Segment, Button, Label } from 'semantic-ui-react';
import { connect } from 'react-redux'
import { withFirebase } from 'react-redux-firebase'
import { Field, reduxForm, SubmissionError } from 'redux-form';
// import { login } from '../authActions'


class LoginForm extends React.Component {

render(){
   const { handleSubmit, error, firebase} = this.props
   console.log('4: LoginForm->render->firebase:',firebase)

   const myLogin = (credentials) => {
       console.log('1: myLogin fired',credentials)
       const {firebase} = this.props;
       console.log('2: myLogin -> firebase',firebase)

       return async (firebase)=> {
         console.log('3: async -> myLogin -> firebase: ', firebase)
        try {
          await firebase.auth().signInWithEmailAndPassword(credentials.email, 
credentials.password);
          console.log('try fired')
        } catch (error) {
          console.log(error);
          throw new SubmissionError({
        _error: 'Login failed'
          })
        }
      }

}
    return (
    <Form size="large" onSubmit={handleSubmit(myLogin)}>
  <Segment>
    <Field
      name="email"
      component={Form.Input}
      type="text"
      placeholder="Email Address"
    />
    <Field
      name="password"
      component={Form.Input}
      type="password"
      placeholder="password"
      />
             {error && <Label basic color='red'>{error}</Label>}
            <Button fluid size="large" color="teal">
          Login
        </Button>

      </Segment>
    </Form>
  );
};
};

const mapState = (state) => ({
firebase: state.firebase
})

//Attempted to use an action creator to log use in, but couldn't get it to work so I moved the auth call inside the component and called it myLogin
// const actions = {
//   login
// }

export default withFirebase(
connect(mapState, null)(reduxForm({form: 'loginForm'})(LoginForm))
  )

1 Ответ

0 голосов
/ 31 января 2019

Ваш myLogin - это функция с параметром credentials, которая возвращает другую async функцию с параметром firebase, в которой вы await обещание firebase.auth()...

handleSubmit будетевызовите вашу myLogin функцию и передайте ей данные формы. см. Здесь

Таким образом, в вашей функции myLogin вам нужно делать все, что вы хотите, а не возвращать функцию, которая никогда не будет вызвана.Попробуйте что-то вроде: 

const myLogin = (credentials) => {
    console.log('1: myLogin fired',credentials)
    const {firebase} = this.props;
    console.log('2: myLogin -> firebase',firebase)

    try {
        console.log('3: async -> myLogin -> firebase: ', firebase)
        await firebase.auth().signInWithEmailAndPassword(credentials.email, 
            credentials.password);
        console.log('try fired')
    } catch (error) {
        console.log(error);
        throw new SubmissionError({
            _error: 'Login failed'
        })
    }
}
...