TypeError：无法读取 es6 模型上未定义的属性“first_name”答案

【问题标题】：TypeError: Cannot read property 'first_name' of undefined on es6 modelTypeError：无法读取 es6 模型上未定义的属性“first_name”
【发布时间】：2019-05-08 18:08:45
【问题描述】：

我想在 es6 模型中设置 JSON API，但出现此错误 TypeError：无法读取未定义的属性“first_name”

JSON API：

{ “类型”：“用户”， “身份证”：2， “属性”： { “用户名”：“madelynn81”， “电子邮件”：“taylor63@mills.biz”， "first_name": "埃米尔", "last_name": "Veum", “created_at”：“2018-11-17 11:48:13” }, “链接”：{ “自我”：“http://test.test/api/v1/user/2” } }

es6 型号

class UserModel {
    constructor(data) {
        this.id = data.id;
        this.first_name = data.attributes.first_name;
        this.last_name = data.attributes.last_name;
        this.username = data.attributes.username;
        this.email = data.attributes.email;
        this.created_at = data.attributes.created_at;
        this.link = data.links.self;
    }

    get getId() {
        return this.id;
    }

    set setId(value) {
        this.id = value;
    }

    get getFirstName() {
        return this.first_name;
    }

    set setFirstName(value) {
        this.first_name = value;
    }

    get getLastName() {
        return this.last_name;
    }

    set setLastName(value) {
        this.last_name = value;
    }

    get getUsername() {
        return this.username;
    }

    set setUsername(value) {
        this.username = value;
    }

    get getEmail() {
        return this.email;
    }

    set setEmail(value) {
        this.email = value;
    }

    get getCreatedAt() {
        return this.created_at;
    }

    set setCreatedAt(value) {
        this.created_at = value;
    }

    get getLink() {
        return this.link
    }

    set setLink(value) {
        this.link = value
    }
}

我该如何解决这个问题

【问题讨论】：

标签： javascript json ecmascript-6

【解决方案1】：

我不确定你的目标是什么，但通常在 javascript 中使用更简单的语法，并且对象很像数组。

这是一个简单的例子：

    const data = {
      "type": "user",
      "id": 2,
      "attributes": {
        "username": "madelynn81",
        "email": "taylor63@mills.biz",
        "first_name": "Emile",
        "last_name": "Veum",
        "created_at": "2018-11-17 11:48:13"
      },
      "links": {
        "self": "http://test.test/api/v1/user/2"
      }
    }

    const user = { 
      id: data.id,
      firstName: data.attributes.first_name,
      // other props,
    };

    console.log(user.firstName);

事实上，如果您注意到，您的数据本身已经是一个对象。

【讨论】：

【解决方案2】：

从您的问题中不清楚您如何使用 getter 来获取值。一个问题：您的 set/get 对应使用相同的属性名称命名。它们的命名应与持有该值的属性不同。例如：_id 用于值属性名称，id 用于获取/设置名称。

class UserModel {

  constructor(data) {
    this._id = data.id;
    this._firstName = data.attributes.first_name;
  }

  get id() {
    return this.id;
  }

  set id(value) {
    this._id = value;
  }

  get firstName() {
    return this._firstName;
  }

  set firstName(value) {
    this._firstName = value;
  }

}
const data = {
  "type": "user",
  "id": 2,
  "attributes": {
    "username": "madelynn81",
    "email": "taylor63@mills.biz",
    "first_name": "Emile",
    "last_name": "Veum",
    "created_at": "2018-11-17 11:48:13"
  },
  "links": {
    "self": "http://test.test/api/v1/user/2"
  }
}

const user = new UserModel(data);
console.log(user.firstName)

【讨论】：