Formik 嵌套初始值、表单字段名称和点符号？

Question

TL:DR

在 formik 中，如果我有一个用点符号书写的字段名称（例如 name="hands.left"），它链接到 initialValues 中嵌套对象的属性（例如 hands: {left: " ", right: " "})，我如何在使用验证错误时使用该字段名称，也就是访问对象属性（errors.hands.left 和 errors["hands.left"] 不起作用）

由于我的 Typescript 扩展接口定义，我有一个带有嵌套初始值的动态 Formik 表单，例如：

<Formik
  initialValues={{
    description: "",
    specialist: "",
    discharge: {
      date: "",
      criteria: "",
    },
// ...

附加到嵌套值（出院日期和出院标准）的表单字段的形状如下：

          <Field
            name="discharge.date"
            component={TextField}
          />

我使用点符号，因为这似乎是将字段与我的初始值链接起来的唯一方法，因此当输入文本时，初始值 discharge.date（因此，日期属性 initialValues中的放电对象）被修改。

但是我的问题是在添加 Formik 验证时出现的：

validate={(values) => {    
          const requiredError = "Field is required";
          const errors: { [field: string]: string } = {};   

          if (!values.discharge.date) {
            errors.discharge.date = requiredError;
          }
          // ...

如果我尝试使用这样的点符号访问错误（错误。discharge.date），我会收到一条警告说“属性 'date' 在类型 [= 上不存在” 46=]".

我的解决方案是将字段名称从“discharge.date”更改为“dischargeDate”：

      <Field
        name="dischargeDate"
        component={TextField}
      />

和

      if (!values.discharge.date) {
        errors.dischargeDate = requiredError;
      }

这对错误对象有效，但将字段与我的初始值（放电>日期）断开连接，所以当我在字段中输入文本时，而不是更改嵌套对象值的状态（discharge.date) 创建了一个新的独立变量“dischargeDate”：

命名字段以访问嵌套的 initialValue (initialValues>discharge>date) 和错误对象属性时我应该做什么？（错误。discharge.date）是重命名我的 Typescript 类型的唯一解决方案吗？

interface BaseEntry {
  description: string;
  specialist: string;
}

interface Discharge {
  date: string;
  criteria: string;
}

export interface HospitalEntryType extends BaseEntry {
  discharge: Discharge;
}

Answer 1

import { FormikErrors } from 'formik';

interface BaseEntry {
  description: string;
  specialist: string;
}

interface Discharge {
  date: string;
  criteria: string;
}

export interface HospitalEntryType extends BaseEntry {
  discharge: Discharge;
}

interface FormValues extends HospitalEntryType {}

validate = (values: FormValues) => {
  let errors: FormikErrors<FormValues> = {};
  const requiredError = "Field is required";
  
  if (!values.discharge.date) {
    errors = { 
      discharge: {
        date: requiredError
      }
    }
  }

  return errors;
}

Formik 嵌套初始值、表单字段名称和点符号？

Formik nested initial values, form field names and dot notation?

javascript

typescript

reactjs

formik

TL:DR