избыточная форма Тип элемента недопустим: ожидается строка (для встроенных компонентов)

Question

• В моем шаговом коде я пытаюсь включить переключатель.
• Когда я включаю переключатель, я получаю сообщение об ошибке ниже.
• Я посмотрел этот пример https://redux -form.com / 6.0.0-alpha.6 / examples / simple / и затем реализовал
• но я все еще сталкиваюсь с ошибками.
• Можете ли вы сказать мне, как это исправить, чтобы в будущем я сам это исправил.
• Предоставление моей песочницы и фрагмента кода ниже.

https://codesandbox.io/s/0prxxxvy0n

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: undefined. Вы скорее всего забыл экспортировать ваш компонент из файла, в котором он определен, или вы могли бы смешать импорт по умолчанию и имена.

const AsyncValidationForm = props => {
  console.log("AsyncValidationForm ---->");

  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      <Field name="sex" type="radio" value="male" />

      <div>
        <button type="submit" disabled={submitting}>
          Sign Up
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

Answer 1

Вам просто нужно добавить компонент renderField в ваше радио-поле:

 <Field component={renderField} name="sex" type="radio" value="male" />

Почему это решает вашу проблему? То, что вы используете здесь, является полевым компонентом из-за редукса. (См. Ваш импорт import { Field, reduxForm } from "redux-form";) Когда вы не знаете, как работает компонент, который вы интегрируете, всегда есть надежда на хорошую документацию. В случае с избыточной формой нам повезло: на самом деле есть такая, которая также описывает их компонент поля.

Мы можем получить следующее:

1. Требуется название реквизита. Это строковый путь в точечно-скобочной форме, соответствующий значению в значениях формы. Это может быть так же просто, как 'firstName' или так же сложно, как contact.billing.address [2] .phones [1] .areaCode.

2. Требуется компонентная опора. Это может быть Компонент, функция без сохранения состояния или фабрика, как это предусмотрено в React.DOM. Смотрите раздел Использование ниже. Чтобы узнать о реквизитах, которые будут предоставлены какому-либо компоненту, см. Раздел «Реквизиты» ниже.

3. Все остальные реквизиты будут переданы элементу, сгенерированному компонентом prop.

Во втором абзаце объясняется, почему ваш подход не сработал: требуется компонент проп. :)

Источник: https://redux -form.com / 6.0.0-alpha.6 / docs / api / field.md /

Надеюсь, это поможет.