Как устранить ошибку устаревания defineProperty?

Question

Я получил сообщение об ошибке DEPRECATION: [DEPRECATED] computed property 'value' was not set on object via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object], и я действительно уверен, какой файл ресурсов он хотел бы разрешить. Тем не менее, я видел документацию об амортизации, которая связана с тем, что я получил, и я нашел это

https://deprecations -app-prod.herokuapp.com / v3.x / # toc_use-defineProperty определимый вычисленное-свойство https://emberjs.com/api/ember/release/functions/@ember%2Fobject/defineProperty

Пожалуйста, дайте мне пример того, как решить эту проблему, поскольку я немного запутался.

Вот мой код

import TextField from '@ember/component/text-field';
import { computed } from '@ember/object';
import { reads } from '@ember/object/computed';

import FormControlMixin from 'bos-web/mixins/components/form/control';
import InFormGroupMixin from 'bos-web/mixins/components/form/in-form-group';

/**
 * @protected
 * @component
 * @class TextFormControl
 * @extends Ember.TextField
 * @mixes FormControlMixin
 * @mixes InFormGroupMixin
 */
export default TextField.extend(FormControlMixin, InFormGroupMixin, {
  /**
   * @public
   * @override
   * @property autocomplete
   * @type {string}
   */
  autocomplete: 'off',

  /**
   * @public
   * @override
   * @property classNameBindings
   * @type {string|Array<string>}
   */
  classNameBindings: ['textAlign', 'controlExtraClassNames'],
  /**
   * @public
   * @computed
   * @property textAlign
   * @type {string}
   */
  textAlign: computed('formGroup.textAlign', function() {
    let textAlign = this.get('formGroup.textAlign');

    switch (textAlign) {
      case 'right':
      case 'center':
        return `text-${textAlign}`;
      default:
        return '';
    }
  }),
  /**
   * @public
   * @computed
   * @property controlExtraClassNames
   * @type {Array}
   */
  controlExtraClassNames: reads('formGroup.controlExtraClassNames'),

  /**
   * @public
   * @computed
   * @property placeholder
   * @type {string}
   */
  placeholder: reads('formGroup.placeholder'),
  /**
   * @public
   * @computed
   * @property name
   * @type {string}
   */
  name: reads('formGroup.name'),
  /**
   * @public
   * @computed
   * @property required
   * @type {boolean}
   */
  required: reads('formGroup.required'),
  /**
   * @public
   * @computed
   * @property disabled
   * @type {boolean}
   */
  disabled: reads('formGroup.disabled'),
  /**
   * @public
   * @computed
   * @property autofocus
   * @type {boolean}
   */
  autofocus: reads('formGroup.autofocus'),
  /**
   * @public
   * @computed
   * @property type
   * @type {string}
   */
  type: reads('formGroup.type'),
  /**
   * @public
   * @computed
   * @property maxlength
   * @type {number}
   */
  maxlength: reads('formGroup.maxLength'),
  /**
   * @public
   * @computed
   * @property synchroniseOnReturn
   * @type {boolean}
   */
  synchroniseOnReturn: reads('formGroup.synchroniseOnReturn'),
  /**
   * @public
   * @computed
   * @property value
   * @type {string}
   */
  value: undefined,

  /**
   * @public
   * @override
   * @hook
   * @method init
   */
  init() {
    this._super();

    if (this.get('synchroniseOnReturn')) {
      this.value = computed('formGroup.value', {
        get() {
          return this.get('formGroup.value');
        },
        set(_, value) {
          value = this.trimValue(value);
          this.set('_value', value);

          return value;
        }
      });
    } else {
      this.value = computed('formGroup.value', {
        get() {
          return this.get('formGroup.value');
        },
        set(_, value) {
          value = this.trimValue(value);
          this.setFormGroupValue(value);

          return value;
        }
      });
    }
  },

  /**
   * @public
   * @method keyDown
   * @param {JQueryEven} e
   * @return {boolean} whether bubbling
   */
  keyDown(e) {
    if (this.get('synchroniseOnReturn') && e.keyCode === 27) {
      e.stopPropagation();

      this.set('value', this.get('formGroup.value'));

      return false;
    }
  },

  /**
   * @public
   * @method keyPress
   * @param {JQueryEvent} e
   * @return {boolean} whether bubbling
   */
  keyPress(e) {
    if (this.get('synchroniseOnReturn') && e.keyCode === 13) {
      e.stopPropagation();

      let value = this.get('_value');

      value = this.trimValue(value);
      this.setFormGroupValue(value);

      return false;
    }
  },

  /**
   * @public
   * @method focusIn
   * @param {JQueryEvent} e
   */
  focusIn(/*e*/) {
    this.$().select();
  },

  /**
   * @public
   * @method focusOut
   * @param {JQueryEvent} e
   */
  focusOut() {
    let synchroniseOnReturn = this.get('synchroniseOnReturn');
    let formGroupValue = this.get('formGroup.value');

    if (synchroniseOnReturn && this.get('_value') !== formGroupValue) {
      this.set('value', formGroupValue);
    }
  },

  /**
   * @public
   * @method change
   * @param {JQueryEvent} e
   */
  change() {
    let formGroup = this.get('formGroup');

    formGroup.sendAction('onChange', formGroup.get('model'));

    return true;
  }
});

Любой ответ очень ценится.

Answer 1

Проблема заключается в операторе if-else в init-методе.Вы хотите определить вычисляемое свойство «значение» динамически.Это устарело!

Амортизация была добавлена ​​в Ember 3.2.Код работает до 3.5.Вот официальное объяснение:

Хотя это необычно, можно назначать вычисляемые свойства непосредственно объектам и иметь возможность их неявного вычисления из, например, Ember.get .Как часть поддержки вычисляемых геттерных свойств ES5, непосредственное назначение вычисленных свойств не рекомендуется.Вам следует заменить эти назначения вызовами defineProperty

Так что, по моему мнению, у вас есть два варианта исправления амортизации:

1.Используйте defineProperty из @ ember / object

import { defineProperty } from '@ember/object';
...
if (this.get('synchroniseOnReturn')) {
  defineProperty(this, 'value', computed('formGroup.value', {
    get() {
      return this.get("formGroup.value");
    },
    set(_, value) {
      value = this.trimValue(value);
      this.set("_value", value);

      return value;
    }
  }));
} else {
  ...
}

2.Рефакторинг вашего кода и отбросьте динамическое создание вычисляемого свойства "value"

  value: computed('formGroup.value', {
    get() {
      return this.get("formGroup.value");
    },
    set(_, value) {
      value = this.trimValue(value);
      if (this.get("synchroniseOnReturn")) {
        this.set("_value", value);
      }
      else {
        this.setFormGroupValue(value);
      }

      return value;
    }
  }),
  ....