时间戳

首页 > 解决方案 > React.js：如何创建搜索过滤器？

javascript - React.js：如何创建搜索过滤器？

问题描述

我正在尝试进行工作搜索输入。我正在通过Hooks/useCountries组件中的useEffect中获取的数据进行过滤，侦听App.js中的输入并在Searchbar组件 中为handleChange传递道具。有东西不见了，我不知道是什么。这是 Hooks/useCountries组件

import React, { useState, useEffect } from "react";

export default function useCountries(search) {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  const fetchData = () => {
    fetch("https://restcountries.eu/rest/v2/all")
      .then((res) => res.json())
      .then((result) => setData(result))
      .catch((err) => console.log("error"));
  };
  useEffect(() => {
    const searchResult =
      data &&
      data
        .filter((item) => item.name.toLowerCase().includes(search))
        .map((element) => <div>{element.name}</div>);
  }, []);

  useEffect(() => {
    fetchData();
  }, []);

  return [data, error];
}

应用程序.js


import React, { useState } from "react";

import SearchBar from "./components/SearchBar";
import useCountries from "./Hooks/useCountries";
import MainTable from "./components/MainTable";

import "./App.scss";

export default function App() {
  const [search, setSearch] = useState("");
  const [data, error] = useCountries(search);

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

  return (
    <div className="App">
      <SearchBar handleChange={handleChange} search={search} />
      <MainTable countries={data} />
    </div>
  );
}

搜索栏组件

import React, { useState } from "react";

import "./SearchBar.scss";

export default function Searchbar({ handleChange, search }) {
  return (
    <div className="SearchBar">
      <input
        className="input"
        type="text"
        placeholder="search country ..."
        value={search}
        onChange={handleChange}
      />
    </div>
  );
}

标签： javascriptreactjs

解决方案

每次搜索词更改时都需要触发执行过滤的useEffect方法 - 目前您仅在第一次创建挂钩时使用它一次：

useEffect(() => {
    const searchResult =
      data &&
      data
        .filter((item) => item.name.toLowerCase().includes(search))
        .map((element) => <div>{element.name}</div>);
  }, [search]);

请注意search变量现在如何成为useEffect依赖数组的一部分。

推荐阅读