Redux thunk 异步操作无法访问第一个参数

Question

I have an action that currently works fine using .then but when I try and convert it to async ... await it suddenly can't access the first parameter of the function. The second parameter still works fine though.

Current function that works fine:

export const signInUser = (email, password) => {
  return (dispatch) => {
    return firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        console.log('signed in')
        const { uid, email } = firebase.auth().currentUser
        dispatch({ type: 'SIGN_IN', uid, email })
        return dispatch(fetchAllData())
      })
      .catch(error => {
        throw (error)
      })
  }
};

New function that doesn't work because 'email' is undefined.

export const signInUser = (email, password) => {
  return async (dispatch) => {
    console.log('testing')
    console.log(password)
    console.log('testing', email, password)
    await firebase.auth().signInWithEmailAndPassword(email, password)
    console.log('signed in')
    const { uid, email } = firebase.auth().currentUser
    dispatch({ type: 'SIGN_IN', uid, email })
    return dispatch(fetchAllData())
  }
};

The first console log of console.log('testing') works fine and outputs the string 'testing'. The second console log of console.log(password) also works fine and prints the inputted password. But the third console log console.log('testing', email, password) doesn't get shown at all.

This is how the function is called:

Parent component passes it to child component: submit={(email, password) => dispatch(signInUser(email, password))}

Child component calls it:

  const submitForm = (event) => {
    event.preventDefault();
    if (validForm) {
      setLoading(true)
      submit(email, password)
        .catch(err => {
          setLoading(false)
          console.log('catch:', err.code)
          setError(err.code)
        })
    }
  }

The output I am receiving is catch: undefined .

Also, if I change the function to this:

export const signInUser = (email, password) => {
  const userEmail = email
  return async (dispatch) => {
    console.log('testing')
    console.log(password)
    console.log('testing', userEmail, password)
    await firebase.auth().signInWithEmailAndPassword(userEmail, password)
    console.log('signed in')
    const { uid, email } = firebase.auth().currentUser
    dispatch({ type: 'SIGN_IN', uid, email })
    return dispatch(fetchAllData())
  }
};

Then it works fine. But I don't know why I would need to change it like this?

Thanks

Answer 1

好的，它不起作用的原因是因为在下一行我声明了这样的电子邮件const { uid, email } = firebase.auth().currentUser它覆盖了email的函数参数，因此给了我这样的错误我在声明之前使用email 。