去抖动输入反应 NPM 以获取

Question

我正在尝试使用 React 的去抖动输入库从 API 中获取数据。 OnChange 我正在使用我的 fetch 函数，虽然它将目标值设置为“pokemon”，但它从未将它传递给 API URL 以获取获取甚至值。我不知道如何通过它。有什么指导吗？

import { v4 as uuidv4 } from 'uuid'
import "./App.css";
import { DebounceInput } from "react-debounce-input";
import { useState } from "react";

function App() {
  const [pokemon, setPokemon] = useState("");

  const [pokemonsList, setPokemonsList] = useState([]);

  const handleChangeFetchPokemon = (event) => {
    setPokemon(event.target.value)
      async function getPokemon() {
        try {
          const pokemonAPIURL = `https://pokeapi.co/api/v2/pokemon/${pokemon}`
            const res = await fetch(pokemonAPIURL)
            const pokemonData = await res.json()
            const results = pokemonData

            if(pokemonsList.some(pokemon=> pokemon.name === results.name)){
              alert('este pokemon ya existe my friend! ?')
            } else {
              setPokemonsList([
                ...pokemonsList,
                {
                    name: results.name,
                    img: results.sprites.front_default,
                    id: uuidv4(),
                },
            ])
            }

        } catch (err) {
            alert('este pokemon no existe crack ?')
        }
    }

    getPokemon()

    setPokemon('')
}

console.log(pokemon, pokemonsList)

  return (
    <div className="App">
      <DebounceInput
        minLength={2}
        debounceTimeout={1000}
        onChange={handleChangeFetchPokemon}
      />

      <p>Value: {pokemon}</p>
    </div>
  );
}

export default App;