时间戳

首页 > 解决方案 > React.js：为什么搜索过滤器不起作用？

javascript - React.js：为什么搜索过滤器不起作用？

问题描述

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

解决方案

因此，在您的useCountries钩子中，您需要更新 useEffect 以在搜索更改时触发。否则，它会在第一次加载钩子时运行，但以后不再运行。我也不完全确定您的逻辑试图在您当前的useEffect. 我已经发布了一个可能的更新，它也将您的搜索更改为正则表达式，以解决用户可能不会输入小写字母的可能性。如果这不适用于您的用例，请告诉我，我可以调整它。

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

export default function useCountries(search) {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [searchResults, setSearchResults] = 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(() => {
    if (search) {
      const searchCriteria = new RegExp(search, "i");
      setSearchResults(
        data
          .filter((item) => searchCriteria.test(item.name))
          .map((element) => <div>{element.name}</div>)
      );
    } else {
      setSearchResults(null);
    }
  }, [search]);

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

  return [data, error, searchResults];
}

在 App.js 中添加：

const [data, error, searchResults] = useCountries(search);

这是你的沙箱的分支，它适用于： CodeSandbox

推荐阅读