电商订单搜索功能报错：TypeError: Cannot read property 'filter' of undefined

Hey there! Let's break down why you're hitting this error and how to fix it quickly.

The Root Cause #

That error pops up because you're trying to call the filter() method on this.countryList when it's still undefined. Here's exactly why that's happening:

• You declared loadedCountryList and countryList but didn't initialize them with empty arrays—by default, they're set to undefined.
• The Firebase data fetch in ionViewDidLoad() is asynchronous. If a user starts searching before the data finishes loading, this.countryList hasn't been assigned any value yet.
• When initializeItems() runs before loadedCountryList has data, it just copies that undefined value to this.countryList.

Step-by-Step Fixes #

1. Initialize Your Arrays with Empty Values

First, make sure your arrays start as empty arrays instead of undefined. Update your variable declarations in the .ts file:

loadedCountryList: Array<any> = []; 
countryList: Array<any> = []; 
countryRef: firebase.database.Reference;

This ensures filter() will always have a valid array to work with, even if no data is loaded yet.

2. Add a Guard Clause in getItems()

To prevent filtering before data is ready, add a check at the start of your getItems() function to exit early if there's nothing to filter:

getItems(searchbar) {
  // Exit early if we don't have any data loaded yet
  if (!this.loadedCountryList || this.loadedCountryList.length === 0) {
    return;
  }

  // Reset items back to all of the items
  this.initializeItems();

  // Set q to the value of the searchbar
  var q = searchbar.srcElement.value;
  console.log('q =' + q);

  // If the value is an empty string don't filter the items
  if (!q) {
    return;
  }

  this.countryList = this.countryList.filter((v) => {
    // Optional chaining avoids errors if v.name is undefined
    return v?.name?.toLowerCase().includes(q.toLowerCase());
  });

  console.log(q, this.countryList.length);
}

I also simplified your filter logic here using includes() (a cleaner alternative to indexOf() > -1) and optional chaining (?.) to avoid errors if an order doesn't have a name property.

3. Optional: Disable Search Until Data Loads

If you want to be extra safe, you can disable the search bar until your Firebase data finishes loading. Update your .html to add a disabled attribute tied to your data state:

<ion-searchbar 
  [(ngModel)]="terms" 
  (ionInput)="getItems($event)"
  [disabled]="!loadedCountryList.length"
></ion-searchbar>

This stops users from interacting with the search bar before data is ready, eliminating the chance of the error entirely.

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