Question

在我的LoginForm组件中调用onSubmit时，可以正确调用我的回调函数“ login”，但是跳过了代码的异步/等待部分。 Console.log 1和2被调用，我在控制台中看到它们，但是位于代码async / await部分内的console.log 3从未运行。它被跳过，然后调用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))
  )

Answer 1

您的myLogin是一个带有参数credentials的函数，该函数会返回另一个带有参数async的{{1}}函数，在其中您firebase的承诺{{1 }}

await将调用您的firebase.auth()...函数并将其传递给表单数据。 see here

因此，在您的handleSubmit函数中，您需要做所有想做的事情，而不是返回一个永远不会被调用的函数。尝试类似的东西：

myLogin

为什么回调的异步/等待部分被跳过？

1 个答案: