React新手求助：Uncaught TypeError: Cannot read 'filter' of undefined

针对你遇到的问题，以下是修改后的完整代码，同时会说明关键的修复点：

import { makeObservable, observable, action, computed, runInAction } from "mobx";
// 假设你的api已正确导入

interface Contact {
  FirstName: string;
  PhoneNumber: string;
  id: string;
  photo: string;
}

class Store {
  // 给contacts指定类型并设初始空数组，避免undefined报错
  public contacts: Contact[] = [];
  public filterString = "";

  constructor() {
    makeObservable(this, {
      // 取消注释，将contacts标记为可观察对象，让MobX追踪其变化
      contacts: observable,
      filterString: observable,
      addContact: action,
      removeContact: action,
      updateContact: action,
      updateFilter: action,
      contactCount: computed,
      filteredContacts: computed,
    });

    this.getData();
  }

  async getData() {
    try {
      const value = await api.get('');
      // 用runInAction包裹异步状态更新，确保MobX能正确识别
      runInAction(() => {
        this.contacts = value.data;
      });
    } catch (error) {
      // 添加错误处理，避免API请求失败导致程序崩溃
      console.error('获取联系人数据失败:', error);
    }
  }

  get filteredContacts() {
    // 先判断数据是否存在，再执行过滤排序
    if (!this.contacts.length) return [];

    let filtered = this.contacts.filter((contact) =>
      contact.FirstName.match(new RegExp(this.filterString, "i"))
    );

    filtered = filtered.sort((a, b) => (Number(a.id) < Number(b.id) ? 1 : -1));

    return filtered;
  }

  // 补充你原有的操作方法（示例）
  addContact = action((contact: Contact) => {
    this.contacts.push(contact);
  });

  removeContact = action((id: string) => {
    this.contacts = this.contacts.filter(contact => contact.id !== id);
  });

  updateContact = action((updatedContact: Contact) => {
    const index = this.contacts.findIndex(c => c.id === updatedContact.id);
    if (index !== -1) {
      this.contacts[index] = updatedContact;
    }
  });

  updateFilter = action((filter: string) => {
    this.filterString = filter;
  });

  get contactCount() {
    return this.filteredContacts.length;
  }
}

export default new Store();

关键修复点说明 #

• 类型与初始值处理：给contacts指定Contact[]类型并初始化为空数组，避免API请求完成前this.contacts为undefined，调用filter时出现报错。
• MobX可观察标记：取消contacts: observable的注释，让MobX能够追踪contacts的变化，当API返回数据更新后，自动触发依赖该变量的计算属性和视图更新。
• 异步状态更新：在getData中用runInAction包裹状态赋值操作，因为MobX的action无法直接追踪异步函数中的状态变化，runInAction可以确保赋值操作被MobX正确识别为状态更新动作。
• 空值判断：在filteredContacts计算属性开头添加空数组判断，避免在数据未加载完成时执行过滤逻辑导致报错。

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