去抖动输入反应 NPM 以获取

问题描述

我正在尝试使用 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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）