在 TypeScript 中的 Formik 验证中分配错误消息不起作用

Question

此刻，我正在尝试构建一个用户输入表单，用户应该在 React 和 TypeScript 中使用

Formik

输入姓名、电子邮件和密码。

处理输入本身工作正常，现在我想向输入表单添加验证功能，所以我编写了如下代码。

import { Formik, Form, Field, ErrorMessage } from 'formik'; 

validate(values: User){
    let errors: User; 
    errors = values
    if(!values.password){
      errors.password = 'Enter a password'
    } else if(values.password.length < 8){
      errors.password = 'Enter at least 8 characters for your password'
    }
    console.log("The length of errors.password: " + values.password.length);

    return errors;
  }

return(
      <div>
          <Formik
            initialValues={{ name, email, password }}
            onSubmit={this.onSubmit}
            validate={this.validate}
            enableReinitialize={true}
          >
            {
              (props) => (
                <Form>
                  <fieldset>
                    <label>Name</label>&nbsp;
                    <Field type="text" name="name"/>
                  </fieldset>                                   
                  <fieldset>
                    <label>Email</label>&nbsp;
                    <Field type="text" name="email"/>
                  </fieldset>
                  <ErrorMessage name="password" component="div"/>
                  <fieldset>
                    <label>Password</label>&nbsp;
                    <Field type="password" name="password"/>
                  </fieldset>
                  <button type="submit">Save</button>              
                </Form>
              )
            }      
          </Formik>
      </div>
    )

我想根据用户输入的密码是否足够长来显示错误消息，但即使密码太短也不会显示错误消息。

我在

console.log

方法中添加了

validation

并确保调用了该方法。 当密码足够长时，例如 12 个字符长，部分

console.log("The length of errors.password: " + values.password.length);

调用

并显示密码长度，但当长度小于 8 时，不会将字符串

'Enter at least 8 characters for your password'

分配给

errors.password

，而是显示警告。

Warning: An unhandled error was caught during low priority validation in <Formik validate /> TypeError: Cannot set property 'password' of undefined

我查看了几个 GitHub 页面和 Stack Overflow 帖子，但没有找到似乎与我的问题相关的页面。

我做错了什么？

相同的代码在

JavaScript

中运行良好，因为我当前的版本是

TypeScript

也许我缺少一些东西？

Answer 1

看起来

undefined

在 Formik 内部验证循环期间的某个时刻作为参数传递给

validate

。我建议更改此行：

let errors: User;
errors = values; // why are you assigning your error object to the values?

对此：

let errors: Partial<User> = {};

我不确定为什么要将当前值分配给错误对象。如果没有错误，

errors

应该是一个空对象(

{}

)。

使用新方法，您仍然可以获得类型安全，因为您无法将 User 类型中不存在的属性分配给

errors

：

errors.password = "Password too short"; // this is fine
errors.foo = "asdf"; // TypeError - No property "foo" in type "User"

Answer 2

不使用 Partial，更好的解决方案是使用 Formik 的专用类型。如果 User 有一个布尔类型的字段，我们将无法为与该字段相关的错误分配错误消息，因为预期的类型将是布尔值。

validate(values: User){
    let errors: FormikErrors<User> = {};