Question

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

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

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" />

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

我们可以达到的目标是：

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



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



所有其他道具都将传递给组件prop生成的元素。

第二段说明了为什么您的方法无法解决的问题：需要组件prop。：）

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

希望有帮助。

redux表单元素类型无效：预期为字符串（对于内置组件）

1 个答案: