Question

我正在关注此React course on Udemy，但遇到了一个非常奇怪的错误。

我正在使用Firebase通过电子邮件和密码进行身份验证。当用户点击登录时，我将调度名为LOGIN_USER的操作，该操作将设置加载状态。

登录成功后，我将调度名为LOGIN_USER_SUCCESS的操作以停止加载状态。

由于某种原因，LOGIN_USER_SUCCESS直到我在屏幕上随机点击某个地方后才会发生。

如果我删除行dispatch({ type: LOGIN_USER });以禁用加载状态，则登录将在几秒钟后返回成功。

My actions
-----------

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch((error) => {
        console.log(error);

        firebase.auth().createUserWithEmailAndPassword(email, password)
          .then(user => loginUserSuccess(dispatch, user))
          .catch(() => loginUserFail(dispatch));
      });
  };
};

const loginUserSuccess = (dispatch, user) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  });
};


const INITIAL_STATE = {
  email: '',
  password: '',
  user: null,
  error: '',
  loading: false
};


/// My reducer
---------------

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    case LOGIN_USER:
      return { ...state, loading: true, error: '' };
    case LOGIN_USER_SUCCESS:
      return { ...state, ...INITIAL_STATE, user: action.payload };
    case LOGIN_USER_FAIL:
      return { ...state, error: 'Authentication Failed.', password: '', loading: false };
    default:
      return state;
  }
};

我尝试了.then(user => console.log(user))，直到我随机点击屏幕上的任何位置后，我才看到控制台日志。

如果我做.then(console.log('foo')，我会立即看到foo，但屏幕仍然挂起。

正如我所提到的，我正在学习一个教程，其全文为here on GitHub。我基本上有完全相同的代码。

Answer 1

我有同样的问题。似乎某些Firebase功能在模拟器或模拟器中无法正常工作。我尝试在iPhone设备上运行我的应用程序，但效果很好。

Answer 2

在firebase中登录用户的推荐方法是将回调注册到firebase.auth().onAuthStateChanged(call_back)。您可以从该回调中调度您的操作

在我点击屏幕上的任意位置之前，Firebase登录承诺无法解决

2 个答案: