如何修改Amplify SignUp Attribute组件？解决性别字段关联Cognito问题

前提：配置Cognito用户池自定义属性 #

首先必须在AWS控制台的Cognito用户池中添加自定义属性：

• 进入用户池的属性 → 自定义属性
• 添加属性：名称填gender，类型选字符串，勾选可读写和必填（按需设置），保存。

问题1：字段重复+提交不关联的解决 #

错误原因 #

• 同时在signUpAttributes中添加gender并自定义组件，导致默认文本框与自定义单选框重复
• 自定义组件的name属性为大写Gender，与Cognito属性名gender不匹配，导致提交时无法关联

修正方案（两种方式任选） #

方式1：手动渲染所有字段（完全自定义顺序）

Amplify.configure(awsExports);

function App() {
  return (
    <Provider>
      <Authenticator formFields={formFields}
        components={{
          SignUp: {
            FormFields() {
              const { validationErrors } = useAuthenticator();
              const { NameField, BirthdateField, EmailField, PasswordField, ConfirmPasswordField } = Authenticator.SignUp;

              return (
                <>
                  <NameField />
                  <BirthdateField />
                  {/* 自定义Gender单选框，name严格匹配Cognito属性名gender */}
                  <RadioGroupField 
                    legend="Gender" 
                    name="gender" 
                    defaultValue="male"
                    isRequired
                    errorMessage={validationErrors.gender}
                  >
                    <Radio value="male">Male</Radio>
                    <Radio value="female">Female</Radio>
                    <Radio value="na">Prefer not to say</Radio>
                  </RadioGroupField>
                  <EmailField />
                  <PasswordField />
                  <ConfirmPasswordField />
                </>  
              );
            }
          }
        }}
      >
        {/* 你的应用内容 */}
        <div>已认证内容</div>
      </Authenticator>
    </Provider>
  )
}

// 修正formFields结构：所有字段放在signUp对象下，移除gender避免重复
const formFields = {
  signUp: {
    name: {
      isRequired: true,
      order: 1
    },
    birthdate: {
      isRequired: true,
      order: 2
    },
    email: {
      order: 4
    },
    password: {
      order: 5
    },
    confirm_password: {
      order: 6
    }
  }
};

方式2：通过formFields绑定自定义组件（更简洁）

// 自定义Gender单选框组件
const GenderRadioGroup = ({ field }) => (
  <RadioGroupField 
    legend="Gender" 
    {...field}
    defaultValue="male"
  >
    <Radio value="male">Male</Radio>
    <Radio value="female">Female</Radio>
    <Radio value="na">Prefer not to say</Radio>
  </RadioGroupField>
);

// 配置formFields，直接指定gender字段的自定义组件
const formFields = {
  signUp: {
    name: {
      order: 1
    },
    birthdate: {
      order: 2
    },
    gender: {
      label: 'Gender',
      isRequired: true,
      order: 3,
      component: GenderRadioGroup
    },
    email: {
      order: 4
    },
    password: {
      order: 5
    },
    confirm_password: {
      order: 6
    }
  }
};

// 简化Authenticator配置
function App() {
  return (
    <Provider>
      <Authenticator formFields={formFields} signUpAttributes={['birthdate', 'name']}>
        {/* 你的应用内容 */}
      </Authenticator>
    </Provider>
  )
}

问题2：字段顺序无法调整的解决 #

• 方式1中通过手动渲染字段的顺序直接控制显示顺序
• 方式2中通过formFields每个字段的order属性定义顺序，数值越小越靠前

内容的提问来源于stack exchange，提问作者Juan21Guns