Question

摘要

我正在使用Ember-Model，我需要帮助调试此错误消息..它实际上是两个单独的（但类似的）错误消息：

TypeError: Cannot read property 'map' of undefined

- 和 -

Uncaught Error: Assertion Failed: TypeError: Cannot read property 'map' of undefined

详细

在我的应用中，有一条名为“view”的路线。它从API中提取了一组帐户。

我几乎正确地定义了模型和自定义适配器，并且我从服务器获得了一个带有JSON有效负载的成功响应。我不知道下一步该做什么，因为控制台中有错误（见上文）。

Ember-Model source code中的某个位置map函数内部有一个名为materializeData的属性，并且不知道它要做什么...（我看到有评论）那个让我紧张的函数// FIXME

这是我的代码让我解决了这个问题：

查看型号：

import ViewAdapter from '../../adapters/accounts/view';

var attr = Ember.attr, hasMany = Ember.hasMany, belongsTo = Ember.belongsTo;

var View = Ember.Model.extend({
    debtor_id:                    attr(),
    debtor_legacy_account_number: attr(),
    debtor_full_name:             attr(),
    debtor_balance:               attr()
});

View.adapter = ViewAdapter.create();
View.url =        'api/rest/debtor/list';
View.rootKey =    'data';
View.collectionKey =  'debtors';
View.primaryKey = 'debtor_id';

export default View;

查看适配器：

var ViewAdapter = Ember.RESTAdapter.extend({
    buildURL: function(klass, id) {
        var urlRoot = Ember.get(klass, 'url');
        if (!urlRoot) { throw new Error('ViewAdapter requires a `url` property to be specified'); }
        if (!Ember.isEmpty(id)) {
            return urlRoot + "/" + id;
        } else {
            return urlRoot;
        }
    },
    ajaxSettings: function(url, method) {
        return {
            url: url,
            type: method,
            headers: {
                "Accept": "application/json; version=1.0.0"
            },
            dataType: "json"
        };
    }
});

export default ViewAdapter;

查看路线：

import View from '../../models/accounts/view';

export default Ember.Route.extend({
    model: function() {
        return View.find({page_size: 10, page_number: 1});
    }
});

注意：我在这里使用模型钩子将参数传递给服务器是暂时的，我正在寻找一个更好的方法在一个单独的案例中进行服务器端分页......但这至少适用于现在... 的

我缺少什么？

完整堆栈跟踪

TypeError: Cannot read property 'map' of undefined
    at Ember.RecordArray.Ember.ArrayProxy.extend.materializeData (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:60646:24)
    at Ember.RecordArray.Ember.ArrayProxy.extend.load (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:60630:31)
    at Ember.RESTAdapter.Ember.Adapter.extend.didFindQuery (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61925:15)
    at http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61916:12
    at invokeCallback (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23709:19)
    at publish (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23379:9)
    at publishFulfillment (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23799:7)
    at http://local-03-02-xx.lariatcentral.net/assets/vendor.js:29217:9
    at DeferredActionQueues.invoke (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:21747:18)
    at Object.DeferredActionQueues.flush (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:21797:15) vendor.js:17062
logToConsole vendor.js:17062
RSVP.onerrorDefault vendor.js:59834
__exports__.default.trigger vendor.js:22673
Promise._onerror vendor.js:23397
publishRejection vendor.js:23804
(anonymous function) vendor.js:29217
DeferredActionQueues.invoke vendor.js:21747
DeferredActionQueues.flush vendor.js:21797
Backburner.end vendor.js:21260
Backburner.run vendor.js:21315
apply vendor.js:21145
run vendor.js:19777
settings.success vendor.js:62014
fire vendor.js:3214
self.fireWith vendor.js:3326
done vendor.js:9370
callback

JSON Payload示例

{
  "status":"success",
  "data":{
    "debtors":[
      {
        "debtor_id":1048,
        // ...
        // ...
      },
      {
        "debtor_id":1049,
        // ...
        // ...
      },
      {
        "debtor_id":1050,
        // ...
        // ...
      },
      // ...more JSON...
    ],
    "count":10,
    "total":475,
    "current_page":1,
    "total_pages":48,
    "page_size":10
  }
}

我还发现这个github issue看起来与我的问题完全一样。

Answer 1

当您致电View.find({page_size: 10, page_number: 1});时，ember-model将向服务器发送请求，获取有效负载并调用didFindQuery挂钩。由于您使用RESTAdapter，current implemantation如下：

didFindQuery: function(klass, records, params, data) {
  var collectionKey = Ember.get(klass, 'collectionKey'),
    dataToLoad = collectionKey ? data[collectionKey] : data;

  records.load(klass, dataToLoad);
},

第四个参数data是您的有效负载。由于您将View.collectionKey设置为'debtors'，因此会records.load调用data['debtors']并返回undefined。该未定义的值将传递给materializeData，您将收到TypeError: Cannot read property 'map' of undefined。你需要的是data['data']['debtors']。

你能做的是：

将您的有效负载结构更改为：

{
  "status":"success",
  "debtors":[
      {
        "debtor_id":1048,
        // ...
        // ...
      },
      {
        "debtor_id":1049,
        // ...
        // ...
      },
      {
        "debtor_id":1050,
        // ...
        // ...
      },
      // ...more JSON...
    ],
    "count":10,
    "total":475,
    "current_page":1,
    "total_pages":48,
    "page_size":10
  }
}

或覆盖didFindQuery和didFindAll至：

var ViewAdapter = Ember.RESTAdapter.extend({
    // others methods ...
    didFindQuery: function(klass, records, params, data) {
      var collectionKey = Ember.get(klass, 'collectionKey'),
        dataToLoad = collectionKey ? data['data'][collectionKey] : data;

      records.load(klass, dataToLoad);
    },
    didFindAll: function(klass, records, data) {
      var collectionKey = Ember.get(klass, 'collectionKey'),
        dataToLoad = collectionKey ? data['data'][collectionKey] : data;

      records.load(klass, dataToLoad);
    }
})

我希望它有所帮助

Ember-Model：帮助调试 - TypeError：无法读取属性＆＃39; map＆＃39;未定义的

摘要

详细

1 个答案: