时间戳

首页 > 解决方案 > 基于任何字符实时搜索外部数据 - React Hooks

reactjs - 基于任何字符实时搜索外部数据 - React Hooks

问题描述

我有输入字段，当您单击该字段时，会显示获取的数据列表。现在我需要能够根据数据包含的任何字母来搜索数据。

示例：我有不同颜色的列表 - 当我在输入字段中输入字母 L 时 - 具有该字母的所有颜色都会被过滤掉 - bLack、yelLow、bLue 等......

const colorInformations = "secretURL";

const [colorData, setColorData] = useState([]);
    useEffect(() => {
        getColorInfo();
    }, []);
    const getColorInfo = async () => {
      try {
        const response = await fetch(colorInformations);
        const jsonData = await response.json();
        const { array1, array2 } = jsonData;
        const combinedData = array1.map(({ data1 }, i) => ({
          ...data1,
          ...array2[i].data2
        }));
        setColorData(combinedData); 
      } catch (err) {
        console.log(err)
      }
   };

获取的数据：

 { colorData && colorData.map(( data1, data2,  index)  =>
        <li key={"index" + index}>
                    <div className="col-6 text ">
                      <h5>{data1.name} </h5>
                      <p>{data2.color} </p>  
        </li>
         )}

对于输入，我正在尝试这样做：

<input type="text" onChange={handleSearchChange} value={search} />

和 handleSearchChange 函数：

const [search, setSearch] = useState("");

  const handleSearchChange = (e) => {
    setSearch(e.target.value)
 }

在这里我卡住了，我需要完成的是：

  1. 根据字母过滤数据 - 当输入 L 时，所有带有 L 的颜色都会被过滤

  2. 当我单击特定颜色时，它需要显示在输入表单中，并且必须在列表中记住 - 所以当再次打开列表时，单击的颜色仍然处于活动状态

我知道我应该使用 .filter() 函数 - 我只是不确定如何以及在哪里

标签： reactjssearchreact-hooksfetch

解决方案

1-为过滤数据添加一个新状态。

const [filteredColorData, setFilteredColorData] = useState([]);

2- onMount 将获取的数据与实际数据源一起设置为过滤后的数据。

const getColorInfo = async () => {
    try {
      const response = await fetch(colorInformations);
      const jsonData = await response.json();
      const { array1, array2 } = jsonData;
      const combinedData = array1.map(({ data1 }, i) => ({
        ...data1,
        ...array2[i].data2
      }));
       setColorData(combinedData);
       setFilteredColorData(combinedData); // set fetched Data.
     } catch (err) {
      console.log(err);
     }
 };

3-呈现过滤后的数据而不是实际数据。

 { 
    filteredColorData && filteredColorData.map(( data1, data2,  index)  =>
      <li key={"index" + index}>
        <div className="col-6 text ">
          <h5>{data1.name} </h5>
          <p>{data2.suggestion} </p>  
        </div>
      </li>
    ) 
  }

4-实现过滤器功能，过滤数据并设置过滤后的数据，并将其重新呈现给每个用户输入。

useEffect(() => {
    filterdata();
  }, [search])

  const filterdata = () => {  
    const filtered = colorData && colorData.filter((data1) => {
      return data1.name.toLowerCase().startsWith(search.toLowerCase())
    })

    setFilteredColorData(filtered);
  }

还可以查看此链接以获取灵感 现场工作演示

推荐阅读