如何在React的AWS Amplify Authenticator中绑定locale到SelectField

你的问题核心是SelectField未绑定到Cognito的locale属性，导致Amplify无法识别该字段并提交到用户池，最终触发属性缺失的报错。只需给SelectField添加name属性指定为locale即可解决。

修改后的完整代码：

import { Authenticator, SelectField } from "@aws-amplify/ui-react";

const LoginPage = () => {
    return (
        <div className="App">
            <Authenticator
                components={{
                    SignUp: {
                        FormFields() {
                            return (
                                <>
                                    <Authenticator.SignUp.FormFields />
                                    <SelectField
                                        label="语言/区域"
                                        name="locale" // 关键：绑定到Cognito的locale属性
                                        isRequired
                                    >
                                        <option value="FR">FR</option>
                                        <option value="EN">EN</option>
                                        <option value="IT">IT</option>
                                    </SelectField>
                                </>
                            );
                        },
                    },
                }}
            >
                {/* 登录后展示的内容 */}
                <div>登录成功</div>
            </Authenticator>
        </div>
    );
};

export default LoginPage;

重点说明： #

• name="locale"是核心配置：Amplify会自动将带有该名称的字段值，作为用户属性提交到Cognito，匹配你在用户池中设置的必填locale属性。
• 确认Cognito用户池已将locale设为必填用户属性（你已提及这一点，无需额外配置）。
• 提交注册表单时，Amplify会自动收集默认字段和自定义字段的所有信息，包括locale，不会再出现属性缺失提示。

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