Formik

Question

我正在为这个挠头。
我正在使用 formik 中的 <FieldArray> 来显示多个 <select> 组件并添加更多字段。现在虽然添加更多 <select> 工作正常，但我在控制台中收到这个奇怪的错误 ...

Warning: The `value` prop supplied to <select> must be a scalar value if `multiple` is false.

只有在 <FieldArray> 中使用 <InputSelect> 自定义组件时才会发生这种情况，但是当我在 <FieldArray> 之外单独使用 <InputSelect> 时，它可以正常工作.

这里有一个 Codesandbox 来说明这个问题。

https://codesandbox.io/s/silly-water-z5wl3

我们将不胜感激。

Answer 1

问题似乎是您试图将对象数组传递给字段（语言）。如果您稍微重构它并将可能的语言移动到外部变量中，它就可以工作：

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form, Field, FieldArray } from "formik";
import uuid from "uuid";
import InputSelect from "./InputSelect";

import "./styles.css";

const LANGUAGES = [
  {
    key: "German",
    value: "German"
  },
  {
    key: "French",
    value: "French"
  },
  {
    key: "Japanese",
    value: "Japanese"
  },
  {
    key: "English",
    value: "English"
  }
];

function App() {
  const initialValues = {
    subtitles: [
      {
        language: "Japanese",
        subtitleFile: ""
      }
    ]
  };

  const handleFormSubmit = (values, bag) => {
    console.log(values);
    bag.setSubmitting(false);
  };

  return (
    <div className="App">
      <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
        {({ isValid, isSubmitting, values }) => (
          <Form>
            <h3>This Works</h3>
            <Field
              label="Gender"
              name="gender"
              component={InputSelect}
              options={[
                { key: "Male", value: "Male" },
                { key: "Female", value: "Female" }
              ]}
            />

            <br />
            <br />

            <h3>This Doesn't</h3>
            <FieldArray name="subtitles">
              {({ push }) => (
                <>
                  {values.subtitles.map((item, index) => {
                    console.log(item);
                    return (
                      <div className="twoColumnsGroup" key={uuid()}>
                        <Field
                          placeholder="Language"
                          name={`subtitles[${index}].language`}
                          component={InputSelect}
                          options={LANGUAGES}
                        />
                      </div>
                    );
                  })}

                  <button
                    onClick={() =>
                      push({
                        language: "German",
                        subtitleFile: ""
                      })
                    }
                  >
                    Add Another
                  </button>
                </>
              )}
            </FieldArray>

            <div className="cta">
              <button disabled={!isValid || isSubmitting} type="submit">
                Save
              </button>
            </div>
          </Form>
        )}
      </Formik>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Formik - FieldArray：提供给 <select> 的“value”道具必须是标量

Formik - FieldArray : The `value` prop supplied to <select> must be a scalar

select

reactjs