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;
}