Question

我正在组件中使用init（）来加载一些数据以进行下拉。刷新后可以使用，但是当我将选项卡留给另一个选项卡然后再返回时，出现以下错误： index.js：143322未捕获的TypeError：this.get（...）。然后不是函数

这段代码在我的init函数中，我怀疑它与ember.js的呈现方式有关，但我一直在努力弄清楚如何使其发挥作用。我尝试使用其他生活方式挂钩，但没有一个起作用。

这是组件中的init函数：

init() {
      this._super(...arguments)
      this.get('popularTags').then(function(result) {
        const newArray = []
        for (var i = 0; i < result.length; i++) {
          newArray.push({
            name: result[i],
            value: result[i],
            group: 'Popular'
          })
        }
        const popularTags = this.get('popularTags')
        this.set('popularTags', newArray)
        this.get('queryResults').then(function(result) {
          const tagArray = []
          for (var i = 0; i < result.length; i++) {
            let popular = newArray.filter(tag => tag['value'] === result[i].value)

            if (popular.length === 0) {
              tagArray.push({
                name: result[i].value,
                value: result[i].value,
                group: ''
              })
            }
          }
          const queryResults = this.get('queryResults')

          return this.set('queryResults', tagArray)
        }.bind(this))

      }.bind(this))


    },

Answer 1

关于您上面的示例，我有些不明白。您似乎正在获取并设置popularTags和queryResults属性。我不确定这只是您的示例中的问题还是其他问题-我将假定它是示例问题，然后更一般地对此进行细分：

在init中做这么多工作通常不是一个好主意，以至于它计划从即将推出的微光组件API中删除。特别是在任何生命周期挂钩内的set都是从DOM中删除组件时出现奇怪错误的秘诀。虽然您可以使用ember-concurrency之类的工具来帮助分解并处理set，但我的建议是将其拆分为多个计算出的属性。看起来可能像这样：

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  popularTags: computed('tags.[]', function(){
    return this.tags.filter(tag => tag.isPopular);
  }),
  queryResults: computed('popularTags.[]', function(){
    return this.popularTags.map(tag => {
      return {
        name: tag.name,
        value: tag.description
      };
    });
  }),
});

像这样的

Computed Properties是在Ember中表达数据转换的方式。他们依靠一些传递到组件中的初始数据，然后对其进行修改以供使用。在上面的示例中，我假设传入了tags，但是您可以看到queryResults依赖于popularTags的结果，这样可以在其中执行几种不同的数据转换。订单。

虽然在初次构建Ember.js应用程序时在组件中加载异步数据可以正常工作，但我建议您将所有数据加载都限制在Route's Model Hook上，因为它更适合异步工作和然后将为您提供可以直接传递到组件中的数据，而不必担心将其加载到该组件中的困难。

Answer 2

您的问题可能是您用curl调用组件并传递了popularTags：

{{your-component popularTags=something}}

这是双向的。确切地说，这意味着更改popularTags 内部组件将更改呼叫者上的something。

这意味着，如果您删除此组件并稍后重新创建（您提到的一些制表符表示），则您已经在外部更改了something。您的组件期望popularTags（因此something）是一个承诺（在调用this.get('popularTags').then时）。但是，因为您使用this.set('popularTags', newArray)对其进行了更改，所以它不再是一个承诺，而是一个数组。

通常，我建议您在更改传递的属性时要小心。

this.get（...）。then在使用init时不是函数：ember.js

2 个答案: