redux 表單元素類型無效：應為字符串（對於內置組件）

Question

• 在我的步進器代碼中，我試圖包含單選按鈕。
• 當我包含單選按鈕時，出現以下錯誤。
• 我查看了這個例子https://redux-form.com/6.0.0-alpha.6/examples/simple/然后 imeplemented
• 但我仍然面臨錯誤。
• 你能告訴我如何修復它，以便將來我自己修復它。
• 在下面提供我的沙箱和代碼片段。

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 import { Field, reduxForm } from "redux-form"; ）當您不知道正在集成的組件如何工作時，總是希望有一個好的文檔。 在 redux-form 的情況下，我們很幸運：實際上有一個也描述了他們的 Field 組件。

我們可以得到的是以下內容：

1. 名稱道具是必需的。 它是一個字符串路徑，采用點和括號表示法，對應於形式 values 中的值。 它可能像“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/

希望能幫助到你。