Vue.js中调用signUp函数出现Cannot destructure property 'username' of 'undefined'错误的原因咨询

让我来帮你理清这个报错的根源——其实是函数定义的参数结构和你调用时的参数传递不匹配导致的！

先看你的signUp函数定义：

async signUp(_, { username, password, firstName, lastName }) {
  const data = await Auth.signUp({
    username,
    password,
    attributes: {
      given_name: firstName,
      family_name: lastName,
    },
  });
  console.log(data);
},

这个函数明确期望接收两个参数：

• 第一个参数用_占位（通常在GraphQL resolver场景下，这个参数代表父级数据或根值，你暂时用不到它）
• 第二个参数才是包含username、password等属性的对象，你在这里用了解构语法直接提取里面的属性。

但你在Registration.vue里的调用方式是：

async submitReg() {
  AWSAuth.actions.signUp({ username: this.form.email, password: this.form.password });

这里你只传了一个参数——把本该作为第二个参数的对象，当成了第一个参数传给了signUp。这就导致函数里的第二个参数变成了undefined，当它尝试从undefined里解构username时，自然就抛出了Cannot destructure property 'username' of 'undefined'的错误。

修复方法 #

按照函数定义的参数结构来传递参数，补上第一个占位参数（传null或undefined都可以），然后把你的参数对象作为第二个参数传递。另外别忘了signUp是异步函数，调用时最好加上await来处理异步逻辑：

async submitReg() {
  await AWSAuth.actions.signUp(null, { 
    username: this.form.email, 
    password: this.form.password,
    firstName: this.form.firstName, // 如果你的表单里有这两个字段，记得一起传
    lastName: this.form.lastName
  });
}

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