如何在 react-hooks 中创建搜索框？答案

【问题标题】：How can I make a search box in react-hooks?如何在 react-hooks 中创建搜索框？
【发布时间】：2021-04-07 15:47:46
【问题描述】：

我正在制作鸡尾酒食谱网站。如果我搜索鸡尾酒的名称，我希望鸡尾酒出现。显示给我的错误消息如下。 “TypeError：无法读取未定义的属性‘过滤器’”

请告诉我如何解决这个问题。我是初学者。我的代码有问题吗？这是 Search.jsx

import React, { useState, useEffect } from "react";
import useFetch from "../Components/useFetch";

const Searchs = () => {
  const url =
    "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";
  const [data] = useFetch(url);
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState([]);

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };
  useEffect(() => {
    const results = data.drinks.filter(({ strDrink }) =>
      data.strDrink.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);
  return (
    <Wrapper>
      <Search
        type="text"
        placeholder="재료 또는 이름을 검색하세요"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </Wrapper>
  );
};
export default Searchs;

这是 useFetch.jsx

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  }, []);
  return [data, loading];
}
export default useFetch;

这是 JSON

{
  "drinks": [
    {
      "idDrink": "12784",
      "strDrink": "Thai Iced Coffee",
      "strCategory": "Coffee / Tea",
      "strIBA": null,
      "strAlcoholic": "Non alcoholic",
      "strGlass": "Highball glass",
      "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/rqpypv1441245650.jpg",
      "strIngredient1": "Coffee",
      "strIngredient2": "Sugar",
      "strIngredient3": "Cream",
      "strIngredient4": "Cardamom",
      "strMeasure1": "black",
      "strMeasure3": " pods\n",
      "strImageAttribution": null,
      "strCreativeCommonsConfirmed": "No",
      "dateModified": "2015-09-03 03:00:50"
    }
  ]
}

【问题讨论】：

标签： json reactjs api search react-hooks

【解决方案1】：

在filter() 之前进行空值检查，您的 API 可能会返回空值/未定义，您应该处理此类情况。

奖励：onChange={handleChange}不要直接调用API on change，添加一些谴责检查，以提高性能。

useEffect(() => {
    const results = data?.drinks?.filter(({ strDrink }) =>
        data.strDrink.toLowerCase().includes(searchTerm)
    ) ?? [];
    setSearchResults(results);
}, [searchTerm]);

【讨论】：

【解决方案2】：

你在这段代码中犯了很多错误，看看下面我是怎么做的

您可以在此处找到沙盒 URL，您可以在其中查看实时工作代码

https://codesandbox.io/s/boring-tesla-hoc11?file=/src/App.js:75-1141

我已将您的包装器更改为输入元素以进行测试，您可以将其还原

const Searchs = () => {
  const url =
    "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";

  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };
  useEffect(() => {
    async function fetchUrl() {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
      setLoading(false);
      const results = data.drinks.filter(({ strDrink }) =>
        strDrink.toLowerCase().includes(searchTerm)
      );
      setSearchResults(results);
    }
    fetchUrl();
  }, [searchTerm]);
  return (
    <> 
      <input 
        type="text"
        placeholder="재료 또는 이름을 검색하세요"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map((item,index) => (
          <li key={index}>{item.strDrink}</li>
        ))}
      </ul>
    </>
  );
};

【讨论】：

还是Unhandled Rejection (TypeError): Cannot read property 'filter' of undefined
你的 useFetch 函数返回 undefined 这就是为什么它提供错误检查沙箱代码使用它，正如我在那边提到的那样

【解决方案3】：

您的 API 似乎没有返回任何内容。您应该添加一个检查以查看 API 是否返回任何内容：

ALSO：您必须将从useFetch 获得的data 包含到useEffect 依赖项中，否则它的值不会在每个useEffect 调用中更改：

useEffect(() => {
    const results = data?.drinks?.filter(({ strDrink }) =>
        data.strDrink.toLowerCase().includes(searchTerm)
    ) ?? [];
    setSearchResults(results);
}, [searchTerm, data]);

【讨论】：