Formik Field Array для вложенных полей - PullRequest
Новая
       17

Formik Field Array для вложенных полей

0 голосов
/ 23 сентября 2019

Я хочу визуализировать форму с вложенными полями внутри компонента <FieldArray />.Но когда я создаю поля формы на основе индекса, я получаю дополнительные поля, которые мне не нужны.Как показано ниже:

friends_list

Как видите, Юлия и 28 должны быть в одном ряду.Но вместо этого я получаю четыре поля в два ряда.Пустые поля также записывают значения возраста и имени при вводе.Я не понимаю, почему это происходит.Но я не хочу их.Ниже вы можете увидеть код для компонента.Я также создал «песочницу» для работы над ней здесь codesandbox .

Примечание: я хочу эти вложенные поля, поэтому структура моего массива friends: [{ name: "Julia" }, { age: "28" }] важна для вопроса. 

<code>import React from "react";
import { Formik, Form, Field, FieldArray } from "formik";

// Here is an example of a form with an editable list.
// Next to each input are buttons for insert and remove.
// If the list is empty, there is a button to add an item.
const FriendList = () => (
  <div>
    <h1>Friend List</h1>
    <Formik
      initialValues={{ friends: [{ name: "Julia" }, { age: "28" }] }}
      onSubmit={values =>
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500)
      }
      render={({ values }) => (
        <Form>
          <FieldArray
            name="friends"
            render={arrayHelpers => (
              <div>
                {values.friends.map((friend, index) => (
                  <div key={index}>
                    <Field name={`friends[${index}].name`} />
                    <Field name={`friends.${index}.age`} />
                    <button
                      type="button"
                      onClick={() => arrayHelpers.remove(index)}
                    >
                      -
                    </button>
                  </div>
                ))}
                <button
                  type="button"
                  onClick={() => arrayHelpers.push({ name: "", age: "" })}
                >
                  +
                </button>
              </div>
            )}
          />
          <pre>{JSON.stringify(values, null, 2)}
)} /> );экспорт по умолчанию FriendList;

1 Ответ

1 голос
/ 23 сентября 2019

У вас неправильные начальные значения, должно быть: 

[{ name: "Julia", age: "27" }]

Вместо этого вы передали 2 элемента массива

...