Ember JS中store.findAll()返回数组无法访问指定位置数据的问题求助

我来帮你排查这个问题，你已经做了序列化器适配的工作，但还是遇到了数组长度正确但属性访问返回undefined的情况，咱们一步步分析解决：

1. 首先检查Contact模型的属性定义 #

这是最容易被忽略的关键！Ember Data只会把模型中明确声明的属性映射到记录上，如果你的contact模型没有定义对应的字段，即使JSON返回了这些数据，也无法通过contact.firstName这种方式访问到。

请确保你的app/models/contact.js文件正确声明了所有需要的属性：

import Model, { attr } from '@ember-data/model';

export default class ContactModel extends Model {
  @attr('string') firstName;
  @attr('string') lastName;
  @attr('string') deletedAt;
  @attr('string') mobileNumberHome;
  @attr('string') companyName;
  @attr('date') dateOfBirth; // 日期类型需指定对应属性类型
  @attr('number') id;
  @attr('number') userId;
  @attr('string') mobileNumberWork;
  @attr('string') email;
  @attr('string') imageURL;
}

2. 修正序列化器的normalizeResponse写法 #

你当前修改arguments[2]的方式虽然能工作，但不是Ember推荐的写法，容易产生副作用。建议直接构造标准化后的payload并传给_super：

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    // 将后端返回的数组包装成RESTSerializer期望的格式：{ 模型复数名: 数据数组 }
    const normalizedPayload = { contacts: payload };
    return this._super(store, primaryModelClass, normalizedPayload, id, requestType);
  }
});

3. 正确访问RecordArray中的元素 #

Ember Data的findAll()返回的是RecordArray，它是Ember的类数组对象，不是原生JavaScript数组。虽然它有length属性，但直接通过索引（比如model[0]）访问可能会有不可预期的问题，建议：

• 在模板中使用{{#each}}遍历（这是最可靠的方式）：

  {{!-- 在对应的模板文件中 --}}
  {{#each @model as |contact|}}
    <div class="contact-item">
      <h3>{{contact.firstName}} {{contact.lastName}}</h3>
      <p>Email: {{contact.email}}</p>
      <p>Home Phone: {{contact.mobileNumberHome}}</p>
    </div>
  {{/each}}
  

• 在JavaScript代码（比如控制器、组件）中，先转换成原生数组再访问：

  // 比如在组件中
  @tracked contacts = [];
  
  async didInsertElement() {
    const recordArray = await this.store.findAll('contact');
    this.contacts = recordArray.toArray(); // 转换成原生数组
    console.log(this.contacts[0].firstName); // 现在可以正常访问属性了
  }
  

4. 检查适配器的buildURL逻辑（潜在优化点） #

你当前的适配器不管什么请求类型都返回同一个URL（/api/contact/5），但findAll()通常应该请求列表接口（比如/api/contact）而不是单个资源接口。如果后端的/api/contact/5是返回某个用户的联系人列表，那没问题；但如果是返回单个联系人，那返回数组就不符合预期了。可以调整适配器的buildURL来适配不同请求类型：

import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  headers = {
    'Accept': '*/*',
  };

  buildURL(modelName, id, snapshot, requestType) {
    if (requestType === 'findAll') {
      // findAll请求时调用列表接口
      return "http://localhost:8082/ContactManagementSystem1/api/contact";
    }
    // 其他请求类型（比如findRecord）使用默认逻辑或自定义URL
    return this._super(...arguments);
  }
}

按照以上步骤排查后，应该就能正常访问模型的属性了。

内容的提问来源于stack exchange，提问作者Rathish Kumar