Question

我有2个问题

我正在尝试处理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(...)，我该怎么办？

我知道，在大多数情况下，当您提交表单（并重定向到新页面）时，如果您尝试向后导航，则会说出“需要重新提交表单”的内容。但是，当我返回应用程序时，它只是再次呈现了表单。那是我应该担心的事情吗？（首先是什么动机？）

Answer 1

您可以使用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替换为您喜欢的任何名称，因为错误是一个对象。现在，您可以通过这种方式显示错误消息。

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

您也可以使用setErrors代替setFieldError，但是它将用新对象替换整个错误对象。

关于第二个问题，只要您确保表格上没有任何秘密或私人信息，您就不必担心。您还可以在应用程序中设置一个布尔标志，以防止用户通过重定向到其他页面来登录（如果该用户已登录）该表单，但这完全取决于您。

Formik在提交时设置错误

1 个答案: