Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Implementer Et Bilfilter Med useMemo | React Hooks og Context til Tilstandshåndtering
React Mastery

bookUdfordring: Implementer Et Bilfilter Med useMemo

Opgave

Opret CarList-komponenten, der er ansvarlig for at vise en liste over biler og give en søgefunktionalitet til at filtrere dem baseret på deres navne. Brugere kan indtaste et søgeord, og listen over biler filtreres dynamisk baseret på denne indtastning.

Instruktioner

  1. Importér de nødvendige hooks fra React-biblioteket.
  2. Inde i CarList-komponenten erklæres en state-variabel searchInput og en state-opdateringsfunktion setSearchInput ved hjælp af useState-hooken. Initialisér searchInput med en tom streng.
  3. Brug useMemo-hooken til at memoizere filteredCars-arrayet. Memoiseringslogikken skal filtrere bilerne baseret på searchInput. Hvis searchInput er tom, returneres alle biler; ellers filtreres bilerne baseret på søgeinputtet.
  4. Angiv de korrekte variabler i dependency-arrayet for useMemo, som den memoiserede funktion afhænger af.
  1. Inkludér en import-sætning for at importere den nødvendige hook fra React-biblioteket.
  2. Brug useState-hooken til at erklære en state-variabel og dens opdateringsfunktion.
  3. useMemo-hooken memoizerer det filtrerede bil-array og forhindrer unødvendige genberegninger.
  4. I dependency-arrayet for useMemo inkluderes de variabler, som den memoiserede funktion afhænger af (cars og searchInput).

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 9

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain how the useMemo hook helps in this scenario?

What should the filteredCars array contain if the search input is empty?

Which variables should be included in the useMemo dependency array?

Awesome!

Completion rate improved to 2.17

bookUdfordring: Implementer Et Bilfilter Med useMemo

Stryg for at vise menuen

Opgave

Opret CarList-komponenten, der er ansvarlig for at vise en liste over biler og give en søgefunktionalitet til at filtrere dem baseret på deres navne. Brugere kan indtaste et søgeord, og listen over biler filtreres dynamisk baseret på denne indtastning.

Instruktioner

  1. Importér de nødvendige hooks fra React-biblioteket.
  2. Inde i CarList-komponenten erklæres en state-variabel searchInput og en state-opdateringsfunktion setSearchInput ved hjælp af useState-hooken. Initialisér searchInput med en tom streng.
  3. Brug useMemo-hooken til at memoizere filteredCars-arrayet. Memoiseringslogikken skal filtrere bilerne baseret på searchInput. Hvis searchInput er tom, returneres alle biler; ellers filtreres bilerne baseret på søgeinputtet.
  4. Angiv de korrekte variabler i dependency-arrayet for useMemo, som den memoiserede funktion afhænger af.
  1. Inkludér en import-sætning for at importere den nødvendige hook fra React-biblioteket.
  2. Brug useState-hooken til at erklære en state-variabel og dens opdateringsfunktion.
  3. useMemo-hooken memoizerer det filtrerede bil-array og forhindrer unødvendige genberegninger.
  4. I dependency-arrayet for useMemo inkluderes de variabler, som den memoiserede funktion afhænger af (cars og searchInput).

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 9
some-alt