AuthError - 用户名不能为空答案

【问题标题】：AuthError - Username cannot be emptyAuthError - 用户名不能为空
【发布时间】：2021-08-09 18:40:25
【问题描述】：

我为我的 React 应用程序创建了注册页面，后来我尝试将这些注册信息存储在 AWS Amplify 中，我在完成工作后按照文档步骤将注册信息存储在 Amplify 中，我希望所有信息都在线存储，但是那是错误的。，我得到了错误

[ERROR] 55:29.258 AuthError - Username cannot be empty
console.<computed> @ index.js:1
SignUp.js:20 AuthError: Username cannot be empty
    at new AuthError (http://localhost:3000/static/js/vendors~main.chunk.js:10816:20)
    at AuthClass.rejectAuthError (http://localhost:3000/static/js/vendors~main.chunk.js:10734:27)
    at AuthClass.signUp (http://localhost:3000/static/js/vendors~main.chunk.js:8550:19)
    at signUp (http://localhost:3000/static/js/main.chunk.js:1406:62)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/vendors~main.chunk.js:376157:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/vendors~main.chunk.js:376206:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/vendors~main.chunk.js:376266:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/vendors~main.chunk.js:376281:29)
    at executeDispatch (http://localhost:3000/static/js/vendors~main.chunk.js:380516:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/vendors~main.chunk.js:380548:11)
    at processDispatchQueue (http://localhost:3000/static/js/vendors~main.chunk.js:380561:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/vendors~main.chunk.js:380572:7)
    at http://localhost:3000/static/js/vendors~main.chunk.js:380783:16
    at batchedEventUpdates$1 (http://localhost:3000/static/js/vendors~main.chunk.js:394468:16)
    at batchedEventUpdates (http://localhost:3000/static/js/vendors~main.chunk.js:375955:16)
    at dispatchEventForPluginEventSystem (http://localhost:3000/static/js/vendors~main.chunk.js:380782:7)
    at attemptToDispatchEvent (http://localhost:3000/static/js/vendors~main.chunk.js:378265:7)
    at dispatchEvent (http://localhost:3000/static/js/vendors~main.chunk.js:378183:23)
    at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:413814:16)
    at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:383563:14)
    at discreteUpdates$1 (http://localhost:3000/static/js/vendors~main.chunk.js:394485:18)
    at discreteUpdates (http://localhost:3000/static/js/vendors~main.chunk.js:375967:16)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/vendors~main.chunk.js:378149:7)
 


Here Is The Code:



    import React,{useState} from 'react'
    import Amplify,{Auth} from 'aws-amplify'
    import awsconfig from "../SignProperties/aws-exports"
    Amplify.configure(awsconfig)
    function SignUp() {
        const initialValues={username:"",password:"",email:"",phoneNumber:""}
        const [loginAttributes,setLoginAttributes]=useState(initialValues)
        const onChange=(e)=>{
            setLoginAttributes({[e.target.name]:e.target.value})
    
        }
        const signUp=async()=>{
            const {username,password,email,phoneNumber}=loginAttributes
            try{
                await Auth.signUp({username,password,attributes:{
                    email,phoneNumber
                }
            })
            console.log("Succesful")}
            catch(error){console.log(error)}
        }
        return (
            <div className="signUpScreen">
                <input onChange={onChange} name="username" placeholder="username" ></input>
                <input onChange={onChange} name="password" placeholder="password" type="password"></input>
                <input onChange={onChange} name="Email" placeholder="Email" type="email"></input>
                <input onChange={onChange} name="Phone_Number" placeholder="Phone_Number" type="number"></input>
                <button onClick={signUp}> Sign Up</button>
            </div>
        )
    }
    
    export default SignUp

请帮助找出我所做的错误

【问题讨论】：

您收到此错误是因为即使您传递变量(username)，它始终是一个空值("")。您永远不会更新任何变量。
const onChange=(e)=>{ setLoginAttributes({[e.target.name]:e.target.value}) } 兄弟这是错的
试试这个，const onChange=(e)=>{ setLoginAttributes({e.target.name:e.target.value}) }
兄弟那个没穿
您是否尝试在Auth.signup 之前登录username,password？ (console.log(username,password))

标签： javascript reactjs amazon-cognito aws-amplify

【解决方案1】：

问题是你没有更新 loginAttributes 值，你只是重新定义了 loginAttributes 值。

首先，当您输入用户名时，您将 loginAttributes 设置为 {username : name}，然后当您输入密码时，您只需将 loginAttributes 重新定义为 {password: 'password'}，这样它就会从登录属性。

所以你可以在onChange函数中这样写

setLoginAttributes(prev => ({
  ...prev,
  [e.target.name]: e.target.value
})

它将用以前的 loginAttributes 值更新新值。

【讨论】：