时间戳

首页 > 解决方案 > redux 表单元素类型无效：应为字符串（用于内置组件）

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

问题描述

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

标签： javascripthtmlreactjsreduxmaterial-ui

解决方案

您只需将 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. 所有其他道具将传递给组件道具生成的元素。

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

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

希望能帮助到你。

推荐阅读