时间戳

首页 > 解决方案 > aws amplify auth 自定义注册无法映射未定义

reactjs - aws amplify auth 自定义注册无法映射未定义

问题描述

学习使用 aws amplify 并且我想按照我找到的示例覆盖他们的注册组件，但我不断收到下面的未定义错误。cognito 用户池要求用户使用电子邮件作为用户名和名称属性进行注册。

这是我的注册组件。

import React from "react";
import { SignUp } from "aws-amplify-react";

export class CustomSignUp extends SignUp {
    constructor(props) {
      super(props);
      this._validAuthStates = ["signUp"];
      this.state = {
        userName: 'test',
        password: 'MyTest123!',
        email: 'test@gmail.com',
        phoneNumber: '1231231234'
      };
    }

    handleSubmit = async (event) => {
        event.preventDefault();
        console.log(this.state);
        const response = await super.signUp({
            username: this.state.email, 
            password: this.state.password, 
            attributes: {
              email: this.state.email, 
              phone_number: this.state.phone,
              name: this.state.userName
            }
          });
        console.log(response);
    }

    showComponent(theme) {
      return (
          <form onSubmit={this.handleSubmit}>
            <input
            type="text"
            value={this.state.userName}
            onChange={event => this.setState({ userName: event.target.value })}
            placeholder="Enter your username"
            required
            />
            <input
            type="text"
            value={this.state.password}
            onChange={event => this.setState({ password: event.target.value })}
            placeholder="Enter your password"
            required
            />
            <input
            type="text"
            value={this.state.email}
            onChange={event => this.setState({ email: event.target.value })}
            placeholder="Enter your email"
            required
            />
            <button>Sign up</button>
        </form>
      );
    }
  }

错误：

Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
at CustomSignUp.SignUp.validate (SignUp.js:94)
at CustomSignUp.SignUp.signUp (SignUp.js:203)

标签： reactjsamazon-cognitoaws-amplify

解决方案

我有同样的问题。this.signupFields直接在 CustomSignUp 类的构造函数中声明似乎是我可以修复它的唯一方法。似乎这并没有从父类的道具中传递下来。

export class CustomSignUp extends SignUp {
    constructor(props) {
      super(props);
      this._validAuthStates = ["signUp"];
      this.state = {
        userName: 'test',
        password: 'MyTest123!',
        email: 'test@gmail.com',
        phoneNumber: '1231231234'
      };

      this.signUpFields = [
      {
        label: 'Username',
        key: 'username',
        required: true,
        displayOrder: 1,
        type: 'string'
      },
      {
        label: 'Email',
        key: 'email',
        required: true,
        displayOrder: 2,
        type: 'string'
      },
      {
        label: 'Password',
        key: 'password',
        required: true,
        displayOrder: 3,
        type: 'password'
      },
      {
        label: 'Phone Number',
        key: 'phone_number',
        required: false,
        displayOrder: 4,
        type: 'string'
      }
    ];

    }

我不确定是否需要电话号码，但我注意到 defaultSignUpFields 变量已设置为 required=true，因此我故意在此处覆盖它。

推荐阅读