提交时 Formik 设置错误

Question

我有 2 个问题

我正在尝试处理 Formik 中的提交。我想在我的后端处理身份验证，然后根据我的后端 returns，设置错误“无效 email/password 组合”或重定向到新页面（假设 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 执行此操作，或者我是否需要重定向到包含我的表单的页面并在那里打印一条错误消息？（如果是这样，无论如何我该怎么做，因为我不能 return <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 设置错误

Formik setting errors on submission

reactjs

formik