Serverseitige Suche mit searchCriteria-Filtern

GENAU dieselbe serverseitige Such-Logik wie im React-Web-Tutorial – hier kombiniert mit einem TextInput und dem ListHeaderComponent-Prop von FlatList, damit die Suchleiste MIT der Liste scrollt.

fetchProducts() um eine Suchoption erweitern

api/magentoApi.js

// ... vorheriger Code ...

export async function fetchProducts({
  seite = 1,
  sortierFeld = 'name',
  richtung = 'ASC',
  suchbegriff = '',
} = {}) {
  const params = new URLSearchParams({
    'searchCriteria[pageSize]': PAGE_SIZE,
    'searchCriteria[currentPage]': seite,
    'searchCriteria[sortOrders][0][field]': sortierFeld,
    'searchCriteria[sortOrders][0][direction]': richtung,
  });

  if (suchbegriff.trim() !== '') {
    params.set('searchCriteria[filterGroups][0][filters][0][field]', 'name');
    params.set('searchCriteria[filterGroups][0][filters][0][value]', `%${suchbegriff}%`);
    params.set('searchCriteria[filterGroups][0][filters][0][condition_type]', 'like');
  }

  const data = await magentoFetch(`/products?${params.toString()}`);
  return {
    produkte: data.items,
    gesamtAnzahl: data.total_count,
    seitenAnzahl: Math.ceil(data.total_count / PAGE_SIZE),
  };
}

components/SearchBar.js

import { useState } from 'react';
import { TextInput, Button, View, StyleSheet } from 'react-native';

export default function SearchBar({ onSuchen }) {
  const [eingabe, setEingabe] = useState('');

  return (
    <View style={styles.reihe}>
      <TextInput
        style={styles.eingabe}
        placeholder="Produkt suchen..."
        value={eingabe}
        onChangeText={setEingabe}
        onSubmitEditing={() => onSuchen(eingabe)}
        returnKeyType="search"
      />
      <Button title="Suchen" onPress={() => onSuchen(eingabe)} />
    </View>
  );
}

const styles = StyleSheet.create({
  reihe: { flexDirection: 'row', alignItems: 'center', padding: 16, gap: 8 },
  eingabe: { flex: 1, borderWidth: 1, borderColor: '#ccc', borderRadius: 6, padding: 8 },
});

onSubmitEditing löst die Suche zusätzlich beim Drücken der "Suchen"-Taste auf der Bildschirmtastatur aus – ein mobiles Bedienmuster, das im React-Web-Tutorial (via <form onSubmit>) anders gelöst wurde.

ProductListScreen.js: Suche integrieren

screens/ProductListScreen.js

import { useEffect, useState } from 'react';
import { FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { fetchProducts } from '../api/magentoApi';
import ProductCard from '../components/ProductCard';
import SearchBar from '../components/SearchBar';

export default function ProductListScreen() {
  const [produkte, setProdukte] = useState([]);
  const [seite, setSeite] = useState(1);
  const [seitenAnzahl, setSeitenAnzahl] = useState(1);
  const [suchbegriff, setSuchbegriff] = useState('');
  const [ladend, setLadend] = useState(true);
  const [ladeMehr, setLadeMehr] = useState(false);

  useEffect(() => {
    setLadend(true);
    async function suchenUndLaden() {
      const ergebnis = await fetchProducts({ seite: 1, suchbegriff });
      setProdukte(ergebnis.produkte);
      setSeitenAnzahl(ergebnis.seitenAnzahl);
      setSeite(1);
      setLadend(false);
    }
    suchenUndLaden();
  }, [suchbegriff]);

  async function naechsteSeiteLaden() {
    if (ladeMehr || seite >= seitenAnzahl) {
      return;
    }
    setLadeMehr(true);
    const naechsteSeite = seite + 1;
    const ergebnis = await fetchProducts({ seite: naechsteSeite, suchbegriff });
    setProdukte((bisherige) => [...bisherige, ...ergebnis.produkte]);
    setSeite(naechsteSeite);
    setLadeMehr(false);
  }

  return (
    <FlatList
      data={produkte}
      keyExtractor={(produkt) => produkt.sku}
      renderItem={({ item }) => <ProductCard produkt={item} />}
      ListHeaderComponent={<SearchBar onSuchen={setSuchbegriff} />}
      ListEmptyComponent={
        ladend ? <ActivityIndicator size="large" /> : null
      }
      onEndReached={naechsteSeiteLaden}
      onEndReachedThreshold={0.5}
      ListFooterComponent={ladeMehr ? <ActivityIndicator /> : null}
    />
  );
}

const styles = StyleSheet.create({});

ListHeaderComponent rendert die SearchBar als TEIL der Liste – sie scrollt mit, statt fest am oberen Bildschirmrand zu kleben. [suchbegriff] als useEffect-Abhängigkeit lädt automatisch neu ab Seite 1, sobald sich der Suchbegriff ändert – setSeite(1) verhindert dabei denselben subtilen Bug wie im React-Web-Tutorial.

Tipp: Suchen Sie nach einem Wortteil, den Sie in MEHREREN Ihrer echten Produktnamen vermuten – erscheinen wirklich nur passende Treffer, UND funktioniert das Nachladen innerhalb der gefilterten Ergebnisse korrekt, funktioniert die serverseitige Suche wie gewünscht.