Question

现在我使用React Native和Firebase来构建项目。逻辑很简单：我希望在loginUser（）失败后，错误消息将显示在屏幕上。但是，由于asy问题，错误消息将不会出现在第一次登录失败，因为loginUser尚未完成，并且上次成功登录消息仍然出现，因为登录成功状态尚未更改。

onButtonPress() {
      const { email, password } = this.props;
      this.props.loginUser({ email, password });

      this.renderError();
  }

我向Firebase发送loginUser请求，然后如果登录成功，“错误”状态将为空。但它失败了，“错误”将是一个字符串。相关的行动和减速器如下所示。

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

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

内部减速器：

case LOGIN_USER_SUCCESS:
      return {
        ...state, user: action.payload, error: '', loading: false, password: ''
      };
    case LOGIN_USER_FAIL:
      return {
        ...state, error: 'Authentication Failed', password: '', loading: false
      };

我不知道如何处理这个问题，如何确保只在LoginUser完成后才会出现renderError（）函数？

Answer 1

您正在同步实现异步代码。首先，您应该return firebase.auth()采取行动。然后，您可以使用承诺this.props.loginUser({ email, password }).then(/* .. */)，then()将在Firebase响应请求后执行。最后，根据包裹this.renderError()的状态添加条件，通常这应该在您的JSX中，而不是在您的函数逻辑中。

关于React Native的异步请求

1 个答案: