Question

我想呈现一个<FieldArray />组件内带有嵌套字段的Form。但是，当我基于索引创建“表单字段”时，会得到不需要的额外字段。如下所示：

如您所见，Julia和28应该在同一行。但是，相反，我在两行中得到了四个字段。输入时，空白字段还会写入年龄和名称值。我不知道为什么会这样。但是我不要他们。在下面，您可以看到该组件的代码。我还在codesandbox处创建了一个沙箱进行处理。

注意：我需要这些嵌套字段，因此数组friends: [{ name: "Julia" }, { age: "28" }]的结构对这个问题很重要。

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)}</pre>
        </Form>
      )}
    />
  </div>
);

export default FriendList;

Answer 1

您的初始值有误，应为：

 public function drProfileCreate(Request $request){
    $data = $request->all();
    $response = [
        'success'       =>true, 
        'datax'          =>'Dr Profile uploaded in Contorller. Check',
        'data'          => $data
    ];
    return response()->json($response, 201);
}

相反，您传递了2个数组项

嵌套字段的Formik字段数组

1 个答案: