如何在 API 上进行搜索？答案

【问题标题】：How to make a search on an API?如何在 API 上进行搜索？
【发布时间】：2021-09-25 21:00:20
【问题描述】：

我正在尝试在 Pokemon API 上实现搜索功能，我尝试了不同的方法，但由于某种原因无法使其工作。

我的想法是创建一个函数来处理事件的变化，然后将它传递给一个钩子（useState），也许会发出一个获取请求并重新渲染？

我有这个方法可以从 API 中获取所有 Pokemon。我应该重新设计一个过滤请求吗？

export async function getAllPokemon(url) {
    return new Promise((resolve) => {
        fetch(url).then(res => res.json())
            .then(data => {
                resolve(data)
            })
    });
}

function App() {

  ....
  const [filter, setFilter] = useState("");

  function handleChange(event) {
    setOption(event.target.value)
    console.log(option)
  }

  const initialURL = `https://pokeapi.co/api/v2/pokemon?limit=50`

  const handleSearchChange = (e) => {
    setFilter(e.target.value);

  };

  useEffect(() => {
    async function fetchData() {
      let response = await getAllPokemon(initialURL)
      await loadPokemon(response.results);
      setLoading(false);
    }
    fetchData();
  }, [option])


  const loadPokemon = async (data) => {
    let _pokemonData = await Promise.all(data.map(async pokemon => {
      let pokemonRecord = await getPokemon(pokemon)
      return pokemonRecord

    }))
    setPokemonData(_pokemonData);

  }

  return (
    <>
      <div >
        <div>
          <input
            type="text"
            id="header-search"
            placeholder="Search Pokemon"
            name="s"
            onChange={handleSearchChange}
          />
          <button >Search</button>
        </div>
      </div>
      <div>
        {loading ? <h1 style={{ textAlign: 'center' }}>Loading...</h1> : (
          <>        
            <div className="grid-container">
              {pokemonData.map((pokemon) => {
                return <Card pokemon={pokemon} />
              })}
            </div>
            
          </>
        )}
      </div>
    </>
  );
}

export default App;

【问题讨论】：

请提供一个可用的例子……。例如，您的代码中缺少getAllPokemon。

标签： javascript reactjs api

【解决方案1】：

您需要过滤您在onChange 中获得的口袋妖怪数组。所以像

onChange = e = > {
      setPokemons(pokemons.filter(pokemon => pokemon.indexOf(e.target.value) > -1))
}

因此，这将切换您在每个键入的键上呈现的本地状态变量，进而过滤您的数组。

【讨论】：