ember.js - Ember-Model: Help Debug - TypeError: undefined のプロパティ 'map' を読み取れません

Question

概要

私は Ember-Model を使用していますが、このエラーメッセージのデバッグに助けが必要です。実際には 2 つの別個の (ただし類似した) エラーメッセージです。

TypeError: Cannot read property 'map' of undefined

-と-

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

詳細

私のアプリには、「view」というルートがあります。API からアカウントのコレクションを取得します。

モデルとカスタムアダプターがほぼ正しく定義されており、サーバーから JSON ペイロードを含む正常な応答が返されます。コンソールにエラーがあるため、次に何をすべきかわかりません (上記を参照)。

Ember-Model ソースコードのどこかに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 ペイロードのサンプル

{
  "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の問題も見つかりました。

score 3 · Accepted Answer

View.find({page_size: 10, page_number: 1});ember-model を呼び出すと、サーバーにリクエストが送信され、ペイロードが取得され、didFindQueryフックが呼び出されます。現在の実装を使用しているためRESTAdapter、次のようになります。

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

  records.load(klass, dataToLoad);
},

4 番目のパラメーターdataはペイロードです。そして、あなたが to をセットアップしたのでView.collectionKey、 which returns で'debtors'呼び出さrecords.loadれます。その未定義の値がに渡され、. 必要なのは.data['debtors']undefinedmaterializeDataTypeError: Cannot read property 'map' of undefineddata['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または、 anddidFindAllを次のようにオーバーライドします。

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.js - Ember-Model: Help Debug - TypeError: undefined のプロパティ 'map' を読み取れません

概要

詳細

1 に答える 1

Related

Reference