无法将新属性添加到子类

Question

我基本上正在尝试为一个小项目编写一个自定义 ORM，并且我正在使用一个类来设置我的记录，默认情况下，所有记录都将通过一种类型检查器，该类型检查器将根据我的内容转换任何值说他们应该是

export default class Record {
  constructor(...props) {
    const [model, data] = props;
    forOwn(data, (value, key) => {
      if (model.hasOwnProperty(key)) {
        this[key] = attr(model[key], value);
      } else {
        this[key] = value;
      }
    });
  }
}

通过循环数据数组并从中创建新实例就可以正常工作

data.forEach((item) => {
  serializedData.push(new Item(model, item));
});

Item 只是一个简单的扩展类

class Item extends Record {
  constructor(...props) { super(...props); }
}

这是我遇到问题的地方，我想向Item 子类添加一个新的itemImage 属性，该子类将采用一些现有值并从中创建一个URL。

这两种方法我都试过了，我在网上搜索后发现的，但都不起作用

Reflect.defineProperty(Item.prototype, 'itemImage', {
  get() {
    return `//res.cloudinary.com/***/image/upload/${this.image.image_crop}/${this.image.image_version}/${this.auction_code}/${this.image.original_image_name}`;
  }
});

和

class Item extends Record {
  ...

  get itemImage() {
    return this.getItemImage();
  }
  getItemImage() {
    return `//res.cloudinary.com/***/image/upload/${this.image.image_crop}/${this.image.image_version}/${this.auction_code}/${this.image.original_image_name}`;
  }
}

我该怎么做呢？

编辑

attr 的作用如下

const attr = (type, data) => {
  switch (type) {
    case 'number':
      return parseFloat(data);
    case 'string':
      return data.toString();
    case 'object':
      if (typeof data === 'string' && data.indexOf('{') > -1) {
        return JSON.parse(data);
      } else {
        return data;
      }
  }
};

这是一个完整的沙盒，带有反应演示

https://codesandbox.io/s/7m388jwk1q

Answer 1

您的问题与子类 getter 无关。问题在于您的数据格式。

看看image 属性：

"image": "[{\"original_image_name\":\"iqsnzsutgbpgqsztani5.png\",\"image_crop\":\"c_crop,h_450,w_1125\"}]"

当它被attr函数解析时，它变成了一个数组，不是一个对象。所以你不能访问这样的字段：${this.image.image_crop}。

但是，如果您删除方括号，一切都会正常。或者，如果您无法更改数据格式，只需像这样访问图像：${this.image[0].image_crop}