如何有条件地发送 POST 请求以登录或注册用户

Question

我正在尝试发送 POST 请求以注册或登录用户，具体取决于 prop (isSignUp) 是 true 还是 false 在我的州。

我想要发生的事情：

如果 isSignUp 为真，我希望一个 API 端点被击中，如果不是，则另一个端点被击中。

端点单独工作，但是当我连接所有内容时，我只能让人们登录，一旦他们注册就不能登录。

州：

state = {
    controls: {
      email: {
        elementType: "input",
        elementConfig: {
          type: "email",
          placeholder: "Email Address"
        },
        value: "",
        validation: {
          required: true, // must not be empty
          isEmail: true
        },
        valid: false,
        touched: false
      },
    isSignUp: true
 }
};

处理程序：

handleSubmit = event => {
    this.props.onAuth(
      this.state.controls.email.value,
      this.state.controls.password.value,
      this.state.controls.isSignUp
    );
    event.preventDefault();
  };

  switchAuthModeHandler = () => {
    this.setState(prevState => {
      console.log(prevState);
      return {
        isSignUp: !prevState.isSignUp
      };
    });
  };

切换按钮文本和触发 authModeHandler 的逻辑

 return (
      <div className={classes.Auth}>
        <form onSubmit={this.handleSubmit}>
          {form}
          <Button btnType="Success">SUBMIT</Button>
        </form>
        <Button clicked={this.switchAuthModeHandler} btnType="Danger">
          SWITCH TO {this.state.isSignUp ? "SIGN IN" : "SIGN UP"}
          {console.log(this.state.isSignUp)}
        </Button>
      </div>
    );

const mapDispatchToProps = dispatch => {
  return {
    onAuth: (email, password, isSignUp) =>
      dispatch(actions.auth(email, password, isSignUp))
  };
};

触发 POST 请求登录或注册用户的操作


export const auth = (email, password, isSignUp) => {
  return dispatch => {
    dispatch(authStart());
    const authData = {
      email: email,
      password: password,
      returnSecureToken: true
    };

    {
      isSignUp
        ? axios
            .post(
              "https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=AIzaSyAGT2vM3uzywo3zQUAxNnkpPB6Yr3Ohets",
              authData
            )
            .then(response => {
              console.log(response);
              dispatch(
                authSuccess(response.data.idToken, response.data.userId)
              );
            })
        : axios
            .post(
              "https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=AIzaSyAGT2vM3uzywo3zQUAxNnkpPB6Yr3Ohets",
              authData
            )
            .then(response => {
              console.log(response);
              dispatch(
                authSuccess(response.data.idToken, response.data.userId)
              );
            })
            .catch(err => {
              console.log(err);
              dispatch(authFail(err));
            });
    }
  };
};

Answer 1

在状态下，您将 isSignup NOT 置于控制之下，因此您应该通过 this.state.isSginUp

访问它

handleSubmit = event => {
    this.props.onAuth(
      this.state.controls.email.value,
      this.state.controls.password.value,
      this.state.isSignUp
    );
    event.preventDefault();
  };

P.S 我建议使用 Redux 开发工具。它可以挽救生命。编码愉快！

如何有条件地发送 POST 请求以登录或注册用户

How to send a POST request conditionally to login or sign up users

javascript

conditional-operator

conditional-statements

reactjs