AuthError - 用户名不能为空

Question

我为我的 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 (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 (http://localhost:3000/static/js/vendors~main.chunk.js:383563:14)
    at discreteUpdates (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

请帮忙找出我犯的错误

Answer 1

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

首先，当您输入用户名时，您将 loginAttributes 设置为 {username : name}，然后当您输入密码时，您只需将 loginAttributes 重新定义为 {password: 'password'}，因此它将删除来自 loginAttributes.

的用户名属性

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

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

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

AuthError - 用户名不能为空

AuthError - Username cannot be empty

javascript

reactjs

amazon-cognito

aws-amplify