Formik 嵌套对象错误未显示

在使用Formik时，当我们需要处理嵌套对象的表单数据时，可能会遇到一些错误，比如嵌套对象的值无法被正确地显示。本篇文章将为您介绍如何解决这些问题。

问题描述

假设我们有一个对象 user，其中有一个属性为 profile，它是一个对象类型。我们想要在表单中显示这个 user 对象的信息，并对其进行编辑。

const user = {
  name: "John",
  profile: {
    age: "25",
    address: "123 Main St",
  },
};

<Formik initialValues={user}>
  {({ values }) => (
    <Form>
      <label htmlFor="name">Name</label>
      <Field name="name" type="text" />
      
      <label htmlFor="age">Age</label>
      <Field name="profile.age" type="text" />
      
      <label htmlFor="address">Address</label>
      <Field name="profile.address" type="text" />
      
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>

但是当我们输入信息后，profile对象的值没有被正确地显示出来，我们无法读取到正确的信息。

解决方案

1. 使用 FieldArray

我们可以使用 FieldArray 组件来处理嵌套对象的表单数据。例如，我们可以将 profile 对象中的属性作为 Field 组件的子元素，并传递 values.profile 属性作为其值。当前值应与 formik 变量 values 中相应的值对应。

<Formik initialValues={user}>
  {({ values }) => (
    <Form>
      <label htmlFor="name">Name</label>
      <Field name="name" type="text" />
      
      <FieldArray name="profile">
        {({ push, remove }) => (
          <>
            {values.profile.map((profile, index) => (
              <div key={index}>
                <label htmlFor={`age[${index}]`}>Age</label>
                <Field name={`age[${index}]`} type="text" value={profile.age} />
                
                <label htmlFor={`address[${index}]`}>Address</label>
                <Field name={`address[${index}]`} type="text" value={profile.address} />
                
                <button onClick={() => remove(index)}>Remove</button>
              </div>
            ))}
            <button onClick={() => push({ age: "", address: "" })}>Add Profile</button>
          </>
        )}
      </FieldArray>
      
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>

2. 直接渲染嵌套对象的属性

我们可以将 Field 组件直接渲染嵌套对象中的属性，而不是使用对象本身。例如，我们可以将 Field 组件的名称从 profile.age 更改为 age，并将 values.profile.age 更改为 values.age。

<Formik initialValues={user}>
  {({ values }) => (
    <Form>
      <label htmlFor="name">Name</label>
      <Field name="name" type="text" />
      
      <label htmlFor="age">Age</label>
      <Field name="age" type="text" value={values.profile.age} />
      
      <label htmlFor="address">Address</label>
      <Field name="address" type="text" value={values.profile.address} />
      
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>

总结

在使用表单时，处理嵌套对象的数据可能会产生一些问题。我们可以使用 FieldArray 组件或直接渲染嵌套对象中的属性来解决这些问题。通过这些方法，我们可以始终正确地显示表单数据，并对其进行编辑。