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-to-define-computed-properties 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

问题在于init-method的if-else语句。您要动态定义计算的属性“值”。已弃用！

在Ember 3.2中添加了折旧。该代码可以使用到3.5。这是官方的解释：

尽管不常见，但可以直接将计算的属性分配给对象，并可以从例如 Ember.get 中隐式地计算它们。作为支持ES5 getter计算属性的一部分，不建议直接分配计算属性。您应该将这些分配替换为对 defineProperty
的调用

因此，我认为您有两种方法可以解决此问题：

1。使用@ ember / object

中的defineProperty

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: 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;
    }
  }),
  ....

如何解决defineProperty弃用错误？

1 个答案: