Передача флага в состояние компонента при сбое входа в систему с помощью Formik - PullRequest
Новая
       13

Передача флага в состояние компонента при сбое входа в систему с помощью Formik

0 голосов
/ 01 апреля 2019

У меня есть компонент, который отображает форму входа. Когда пользователь нажимает кнопку входа, чтобы отправить свои учетные данные, они аутентифицируются серверной службой, и я получаю ответ или ошибку. Когда я получаю сообщение об ошибке, я хочу отобразить простое сообщение об ошибке. Однако у меня возникли проблемы с выяснением, как передать значение флага компоненту после отправки. 

const initialValues = {
  username: '',
  password: '',
  invalidCred: false,
}

class LoginForm extends Component<InjectedFormikProps<Props, Values>, State> {
  readonly state = initialState

  render() {
    const { classes, values, errors, handleChange, handleSubmit } = this.props
    return (
      <form className={classes.container}>
        <Grid container>
          <Grid item xs={12} className={classes.grid}>
            {values.invalidCred && (<div>I got issues man</div>)}
            <TextField
              fullWidth
              data-cy="login-username"
              name="username"
            />
          </Grid>
          <Grid item xs={12} className={classes.grid}>
            <TextField
              fullWidth
              data-cy="login-password"
              name="password"
            />
          </Grid>
          <Grid item xs={12} className={classes.grid}>
            <Button
              disabled={false}
              fullWidth
              color="primary"
              variant="outlined"
              data-cy="submit"
              onClick={() => handleSubmit()}
              className={classes.submit}>
              Sign In
            </Button>
          </Grid>
        </Grid>
      </form>
    )
  }
}

const LoginFormEnhanced = withFormik<Props, Values>({
  validationSchema,
  mapPropsToValues: (props: Props) => initialValues,
  handleSubmit: async (values: Values, { props, setSubmitting }: FormikBag<Props, Values>) => {
    const { username, password } = values

    await props.request({ username, password })

    const [error, response] = await to<AxiosResponse<any>, ServerResponseError>(AuthService.login(username, password))

    setSubmitting(false)

    if (response) {
      await props.success({ username, password })
      props.populate(getUserObj(response.data) as Profile)
      props.history.push('/')
    }
    if (error) {
      values.invalidCred = true   <---- THIS IS THE FLAG I WANT TO PASS TO THE COMPONENT IF AN ERROR OCCUS
      props.failure()
    }
  }
})(LoginForm)

Как я могу изменить состояние формы в функции handleSubmit () после неудачного входа в систему, чтобы установить для флага invalidCreds значение true?

1 Ответ

0 голосов
/ 01 апреля 2019

Реактивная система React будет срабатывать всякий раз, когда происходит изменение либо внутри состояния компонента, а состояние родителя передается как props.Поэтому, если у вас есть компонент, который вызывает API для аутентификации, и вам нужно показать некоторую обратную связь пользователю, вы можете добавить свойство error в состояние LoginComponent и обновить его, когда ответ придет. 

const Login = props =>{
    const [authError, errorSetter] = useState(false)

    useEffect(() =>{
        //API call
            .then(res => /*If success update the state with data*/)
            .catch(err => errorSetter(true))
    })
    return(
        {/*....*/}
        {authError && <div> My error message</div>}
    )
}
...