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

Question

TL:博士

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

由于我的 Typescript 扩展接口定义，我有一个动态 Formik 表单，其中包含嵌套的 initialValues，例如：

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

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

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

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

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

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

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

如果我尝试使用这样的点符号 (errors.discharge.date) 访问错误，我会收到一条警告，提示“‘字符串’类型上不存在属性‘日期’”。

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

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

和

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

这确实适用于错误 object，但会断开该字段与我的初始值（放电>日期）的连接，因此当我在字段中输入文本时，而不是更改嵌套 ZA8CFDE6331BD59EB2AC96F8911C4B6 值的 state （discharge.date）一个新的变量 66创建“放电日期”：

命名字段以访问嵌套的初始值（初始值>放电>日期）和错误 object 属性时，我应该怎么做？ (errors.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;
}