Как отправить POST-запрос условно для входа или регистрации пользователей

Question

Я пытаюсь отправить POST-запрос пользователю SIGN UP или LOGIN, в зависимости от того, true или false в моем состоянии: prop (isSignUp).

Что Я хочу, чтобы это произошло:

Я бы хотел, чтобы одна конечная точка API была нажата, если isSignUp истинно, а другая - если нет.

По отдельности конечные точки работают, однако, когда я подключить все, что я могу только войти в систему людей и не войти в них, как только они зарегистрированы.

Состояние:

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
      };
    });
  };

logi c для переключения текста кнопки и запуска 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 НЕ под элементы управления, поэтому вы должны получить к нему доступ через this.state.isSginUp

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

PS Я предлагаю использовать Redux dev tools. это спасает жизни. Удачного кодирования!