redux表单元素类型无效:预期为字符串(对于内置组件) [英] redux form Element type is invalid: expected a string (for built-in components)

问题描述

• 在我的步进代码中，我试图包含单选按钮.
• 包含单选按钮时，出现以下错误.
• 我查看了此示例 https://redux-form .com/6.0.0-alpha.6/examples/simple/，然后实施
• 但我仍然遇到错误.
• 您能告诉我如何修复它，以便将来我自己修复它.
• 在下面提供我的沙盒和代码段.

• In my stepper code Iam trying to include the radio button.
• When I include the radio button I am getting the below error.
• I looked into this example https://redux-form.com/6.0.0-alpha.6/examples/simple/ and then imeplemented
• but still I am faccing errors.
• Can you tell me how to fix it, so that in future I will fix it myself.
• Providing my sandbox and code snippet below.

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

元素类型无效:预期为字符串(对于内置组件) 或类/函数(用于复合组件)，但得到:未定义.你 可能忘记了从定义的文件中导出您的组件， 否则您可能混淆了默认导入和命名导入.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

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>
  );
};

推荐答案

您只需要将renderField组件添加到您的单选字段中即可:

You simply need to add the renderField component to your radio field:

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

为什么它可以解决您的问题? 您在这里使用的是redux-form的Field组件. (请参阅您的导入import { Field, reduxForm } from "redux-form";) 当您不知道要集成的组件如何工作时，总是希望有一个好的文档.对于redux形式，我们很幸运:实际上，还有一个描述其Field组件.

Why does it solve your issue? What you are using here, is the Field component of redux-form. (See your import import { Field, reduxForm } from "redux-form";) When you don't know how a component that you are integrating is working, there is always hope for a good documentation. In case of redux-form we are lucky: there actually is one that as well describes their Field component.

我们可以达到的目标是:

What we can get there is the following:

1. 名称prop是必需的.这是一个用点括号括起来的字符串路径，对应于表单值中的值.它可能像名字"一样简单，也可能像contact.billing.address [2] .phones [1] .areaCode一样复杂.

1. The name prop is required. It is a string path, in dot-and-bracket notation, corresponding to a value in the form values. It may be as simple as 'firstName' or as complicated as contact.billing.address[2].phones[1].areaCode.

组件prop是必需的.它可以是Component，无状态函数或工厂，如React.DOM下提供的那些.请参阅下面的用法"部分.要了解将提供给任何组件的道具，请参阅下面的道具"部分.

The component prop is required. It may be a Component, a stateless function, or a factory, like those provided under React.DOM. See Usage section below. To learn about the props that will provided to whatever your component is, see the Props section below.

所有其他道具都将传递到由道具prop生成的元素.

All other props will be passed along to the element generated by the component prop.

第二段说明了为什么您的方法无法解决的问题:需要组件prop. :)

The second paragraph explains why your approach did not work out: the component prop is required. :)

来源: https://redux- form.com/6.0.0-alpha.6/docs/api/field.md/

希望有帮助.

这篇关于redux表单元素类型无效:预期为字符串(对于内置组件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！