在 formik/ 中使用嵌套的 object 名称<errormessage />

Question

Formik 的文档指出您可以使用 lodash 类型的点路径来命名/访问嵌套对象（例如name.firstName ）。 这也应该适用于它内置的<ErrorMessage/>组件。 我正在使用一个使用 formik 进行表单输入的 React-Typescript 教程应用程序，当与后端代码配对时，它似乎在后台运行良好，但我确实注意到提供嵌套 object 值的字段不会在用户界面。 将生成错误本身，但<ErrorMessage/>组件似乎不想呈现。

该应用程序的精简版本如下。 如果您在没有有效输入的情况下退出表单字段，则应引发“必填字段”错误，但它再次不适用于嵌套的 object 字段（名字/姓氏）。 我想知道是否有其他人遇到过这个问题。 这有点烦人。

我已经看到 formik 似乎经常与 Yup 配对进行验证，这可能会使这个问题变得没有意义，但我还没有走到那一步。 谢谢！

import React from 'react';
import ReactDOM from 'react-dom';

import { ErrorMessage, Field, FieldProps, Formik } from "formik";
import { Form, Button } from "semantic-ui-react";

interface TextProps extends FieldProps {
  label: string;
  placeholder: string;
}

const TextField: React.FC<TextProps> = ({
  field, label, placeholder
}) => (
  <Form.Field>
    <label>{label}</label>
    <Field placeholder={placeholder} {...field} />
    <div style={{ color: "red" }}>
      <ErrorMessage name={field.name} />
    </div>
  </Form.Field>
);

const App: React.FC = () => {

  return (
    <Formik 
    initialValues={{
      name: {
        firstName: "",
        lastName: ""
      },
      job: "",
    }}
    onSubmit={()=>console.log("submitted")}

    validate={values => {
      const requiredError = "Field is required";
      const errors: { [field: string]: string } = {};
      if (!values.name.firstName) {
        errors["name.firstName"] = requiredError;
      }
      if (!values.name.lastName) {
        errors["name.lastName"] = requiredError;
      }
      if (!values.job) {
        errors["job"] = requiredError;
      }
      return errors;
    }}
    >
    {({ isValid, dirty}) => {
      return (
      <Form>
        <Field label="First Name" name="name.firstName" component={TextField} />
        <Field label="Last Name" name="name.lastName" component={TextField} />
        <Field label="Job" name="job" component={TextField} />

        <Button type="submit" disabled={!dirty || !isValid}> Add</Button>
      </Form>
      );
    }}
    </Formik>
  );
};

Answer 1

您是否尝试过使用 formik 的内置 function getIn()？ 它用于从深度嵌套的对象中提取值。 检查此问答

Answer 2

尝试将 validate function 更改为此

validate={values => {
  const requiredError = "Field is required";
  const errors: any = {name: {}};
  if (!values.name.firstName) {
    errors.name.firstName = requiredError;
  }
  if (!values.name.lastName) {
    errors.name.lastName = requiredError;
  }
  if (!values.job) {
    errors["job"] = requiredError;
  }
  return errors;
}}