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

我正在努力使工作搜索输入。我在Hooks/useCountries组件中过滤useffect中获取的数据，在App.js中收听输入，并在搜索栏组件中传递handleChange的道具。有些东西不见了，我想不出是什么
这里是挂钩/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];
}

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>
  );
}

import React，{useState，useffect}来自“React”；
导出默认函数useCountries（搜索）{
const[data，setData]=useState（[]）；
const[error，setError]=useState（null）；
常量fetchData=（）=>{
取回（“https://restcountries.eu/rest/v2/all")
.然后（（res）=>res.json（））
.然后（（结果）=>setData（结果））
.catch（（err）=>console.log（“错误”）；
};
useffect（（）=>{
常量搜索结果=
资料&&
数据
.filter（（项）=>item.name.toLowerCase（）.includes（搜索））
.map（（element）=>{element.name}）；
}, []);
useffect（（）=>{
fetchData（）；
}, []);
返回[数据，错误]；
}

App.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>
  );
}

从“React”导入React，{useState}；
从“/components/SearchBar”导入搜索栏；
从“/Hooks/useCountries”进口useCountries；
从“/components/MainTable”导入MainTable；
导入“/App.scss”；
导出默认函数App（）{
const[search，setSearch]=useState（“”）；
const[数据，错误]=使用国（搜索）；
常数handleChange=（e）=>{
设置搜索（如目标值）；
};
返回(
);
}

搜索栏组件

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];
}

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>
  );
}

import React，{useState}来自“React”；
导入“/SearchBar.scss”；
导出默认函数搜索栏（{handleChange，search}）{
返回(
);
}

您拥有的执行过滤的

useffect

方法需要在每次搜索词更改时触发-当前，在首次创建钩子时，您仅使用一次：

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

useffect（（）=>{
常量搜索结果=
资料&&
数据
.filter（（项）=>item.name.toLowerCase（）.includes（搜索））
.map（（element）=>{element.name}）；
}，[搜索]；

---

注意

search

变量现在是

useffect

依赖项数组的一部分。

hey@Phobos感谢asnwer。事实上我试过了，但没用。