Formik устанавливает ошибки при отправке - PullRequest
Новая
       83

Formik устанавливает ошибки при отправке

0 голосов
/ 21 июня 2020

У меня 2 вопроса

  1. Я пытаюсь обработать отправку в Formik. Я хотел бы обработать аутентификацию в моем бэкэнде, а затем, в зависимости от того, что возвращает мой бэкэнд, установить ошибку «Недопустимая комбинация электронной почты / пароля» или перенаправить на новую страницу (скажем, index). Вот код, обрабатывающий отправку: 

     handleSubmit(
   {email, password}: LoginFormValues,
   {props, setSubmitting, setErrors}
 ){
   fetch(backendURL, {
     method: "POST",
     body: JSON.stringify({username: email, password: password}),
     headers: {
       'Content-Type': 'application/json'
     },
   })
   .then(response => response.json())
   .then(data => {
       if(data.token) {
           localStorage.setItem("token", data.token)
           props.history.push("/")
       }else{
         //TODO
       }
   });
}

Если ответ содержит токен, я перенаправляю на index, но если нет, то я хотел бы отобразить некоторые ошибки. Есть ли способ сделать это с помощью Formik или мне нужно перенаправить на страницу, содержащую мою форму, и распечатать там сообщение об ошибке? (Если да, то как мне это сделать, потому что я не могу вернуть <Redirect /> (я должен использовать history.push(...), верно?

Я знаю, что в большинстве случаев, когда вы отправляете форму (и перенаправляетесь на новую страницу), если вы пытаетесь перейти в обратном направлении, он будет говорить что-то вроде «форма должна быть отправлена ​​повторно». Однако, когда я go снова в своем приложении, он просто снова отображает форму. Это то, о чем мне следует беспокоиться? (Какая мотивация в первую очередь?)

1 Ответ

0 голосов
/ 21 июня 2020

Вы можете легко справиться с ошибкой аутентификации с помощью Formik без перенаправления. Ниже приведен пример. 

    handleSubmit(
      {email, password}: LoginFormValues,
      {props, setSubmitting, setFieldError}
    ){
      fetch(backendURL, {
        method: "POST",
        body: JSON.stringify({username: email, password: password}),
        headers: {
          'Content-Type': 'application/json'
        },
      })
      .then(response => response.json())
      .then(data => {
          if(data.token) {
              localStorage.setItem("token", data.token)
              props.history.push("/")
          }else{
            setFieldError("authentication", "Authentication Failed!");
            setSubmitting(false);
          }
      });
   }

После этого сообщение об ошибке будет доступно в errors.authentication. Вы можете заменить authentication любым именем, потому что error - это объект. Теперь вы можете отобразить свое сообщение об ошибке таким образом. 

{errors.authentication && <div>{errors.authentication}</div>}

Вы также можете использовать setErrors вместо setFieldError, но это заменит весь объект ошибки новым объектом.

Что касается вашего второго вопроса, вам не нужно беспокоиться об этом, если вы гарантируете, что в форме не будет раскрыта секретная или личная информация. Вы также, вероятно, можете установить логический флаг в своем приложении, чтобы пользователь не видел форму, если пользователь вошел в систему путем перенаправления на другую страницу, но это полностью зависит от вас.

...