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

Question

• 在我的步进代码中，我试图包含单选按钮。
• 当我包含单选按钮时，出现以下错误。
• 我研究了这个例子https://redux-form.com/6.0.0-alpha.6/examples/simple/ 然后实现了
• 但我仍然面临错误。
• 能否告诉我如何修复它，以便我以后自己修复它。
• 在下面提供我的沙箱和代码 sn-p。

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

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

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-form 的情况下，我们很幸运：实际上有一个也描述了它们的 Field 组件。

我们可以得到以下内容：

1. 名称属性是必需的。它是一个字符串路径，采用点和括号表示法，对应于表单值中的一个值。它可能像 'firstName' 一样简单，也可能像 contact.billing.address[2].phones[1].areaCode 一样复杂。

2. 组件属性是必需的。它可能是一个组件、一个无状态函数或一个工厂，就像在 React.DOM 下提供的那些。请参阅下面的使用部分。要了解将提供给任何组件的道具，请参阅下面的道具部分。

3. 所有其他的 props 都会传递给组件 prop 生成的元素。

第二段解释了为什么你的方法没有奏效：组件 prop 是必需的。 :)

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

希望对你有帮助。