Question

我正在尝试进行搜索输入。我正在通过 Hooks / useCountries 组件中的 useEffect 中提取的数据进行过滤，并在 App.js 中监听 input 并在搜索栏组件中传递 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];
}

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

SearchBar组件

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

Answer 1

您拥有的执行过滤的useEffect方法需要在每次搜索字词更改时都被触发-当前，您在首次创建钩子时仅使用一次：

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

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

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

1 个答案: