Asynkrone forslag med debounce

I stedet for at filtrere et lokalt array skal du kalde et API-endepunkt, der returnerer matchende forslag baseret på forespørgslen. API-kaldet placeres i en useEffect, der afhænger af den stabiliserede inputværdi. Det flytter ansvaret for filtreringen til serveren og muliggør tilnærmet matchning, rangordning og forslag fra et langt større datasæt.

Tilføj to nye tilstandsvariabler til autofuldførelsen: isLoading (boolesk) til at vise en indlæsningsindikator, mens hentningen er i gang, og error (streng eller null) til at vise en fejlmeddelelse, når hentningen mislykkes. På den måde får brugerne feedback om den asynkrone handling i stedet for at undre sig over, hvorfor forslagene ikke vises.

I den useEffect, der henter data, skal du først sætte setIsLoading(true) og setError(null), derefter kalde fetch(url), fortolke JSON-dataene, kalde setSuggestions(data) og til sidst kalde setIsLoading(false) i en finally-blok eller efter både succes- og fejlforløbet. Effektens afhængighedsliste indeholder kun debouncedInputValue.

Opret en ny AbortController øverst i effekten, og giv controller.signal videre til hentningens indstillinger. Kald controller.abort() i oprydningsfunktionen. Når brugeren skriver, og den stabiliserede værdi ændres, annulleres den forrige hentning, før den nye starter, så gamle resultater ikke kommer frem i forkert rækkefølge.

Når en hentning annulleres, afvises dens Promise med en DOMException med navnet AbortError. I din catch-blok skal du kontrollere if (err.name === 'AbortError') return; for at ignorere annullerede hentninger uden en meddelelse. Håndter kun reelle netværksfejl eller API-fejl, der bør vises til brugeren.

Sæt isLoading til true før hentningen og til false, når den er fuldført eller afvist. Brug en finally-blok for at sikre, at den altid nulstilles: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Uden finally-blokken ville en fejl ved hentningen få indlæsningsindikatoren til at køre for evigt.

Når isLoading er true, og inputfeltet indeholder tekst, skal du vise rullemenuen med en centreret indlæsningsindikator i stedet for forslagslisten. Det fortæller brugeren, at resultaterne er på vej. Når indlæsningen er afsluttet, og forslagene er modtaget, skal du erstatte indikatoren med de faktiske forslag.

Når error ikke er null, skal du vise rullemenuen med fejlmeddelelsen i stedet for forslagene. En meddelelse som "Kunne ikke indlæse forslag. Prøv igen." er venligere end en rå fejlstreng. Du kan eventuelt tilføje en knap til at prøve igen, som udløser hentningen manuelt.

Undgå at hente data for tomme strenge eller meget korte forespørgsler, som giver for mange irrelevante resultater. Kontrollér det i starten af effekten: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Det reducerer unødvendige API-kald og forhindrer en overvældende resultatliste fra et enkelt tegn.

Gem hentede resultater i et useRef-baseret Map: const cache = useRef(new Map()). Før hentningen skal du kontrollere if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Efter en vellykket hentning skal du gemme resultatet. Det eliminerer overflødige netværksanmodninger for forespørgsler, som brugeren allerede har skrevet.

For autofuldførelse er en debounce-forsinkelse på 200-300 ms det bedste kompromis. Kortere forsinkelser (under 200 ms) udløser for mange anmodninger for brugere, der skriver hurtigt. Længere forsinkelser (over 400 ms) får forslagene til at føles træge og langsomme til at reagere. 250 ms er en almindeligt brugt standardværdi i produktionsimplementeringer af autofuldførelse.

Erstat statisk filtrering med en API-hentning i en useEffect, der afhænger af den stabiliserede værdi. Brug AbortController til at annullere forældede anmodninger. Tilføj tilstand for isLoading og error, så brugeren får feedback. Sæt en minimumsgrænse for antal tegn for at undgå for mange kald. Gem resultater i en ref for at springe overflødige netværksanmodninger over.