React.js：你如何实现搜索功能？

Question

我设法从API获取数据。现在我想在不点击的情况下从搜索输入中获取特定数据。我想我需要这里的过滤功能。我设法听取了点击的输入。但是如何获取数据呢？任何帮助将不胜感激。

这是我的代码

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

import CountryListCard from "./CountryListCard";

import "./CountryList.scss";

export default function CountryList() {

  const [data, setData] = useState([]);

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

  const fetchData = () => {

    fetch("https://restcountries.eu/rest/v2/all")

      .then((res) => res.json())

      .then((result) => setData(result))

      .catch((err) => console.log("error"));

  };

  useEffect(() => {

    fetchData();

  }, []);

  function handleChange(e) {

    console.log(e.target.value);

  }

    return (

      <div>

        <input

          className="input"

          type="text"

          placeholder="search country ..."

          value={search}

          onChange={handleChange}

        />

        {data &&

          data.map((country) => (

            <div className="CountryList" key={country.name}>

              <div className="CountryListImg">

                <img src={country.flag} alt="" width="80px" />

              </div>

              <div className="countryName">{country.name}</div>

              <div className="population">{country.population}</div>

              <div className="region">{country.region}</div>

              <div>

                {country.languages.map((language, languageIndex) => (

                  <div key={languageIndex}>{language.name}</div>

                ))}

              </div>

            </div>

          ))}

      </div>

    );

  }

Answer 1

useEffect(() => {&nbsp; const fetchData = () => {&nbsp; &nbsp; fetch("https://restcountries.eu/rest/v2/all")&nbsp; &nbsp; &nbsp; .then((res) => res.json())&nbsp; &nbsp; &nbsp; .then((result) => setData(result))&nbsp; &nbsp; &nbsp; .catch((err) => console.log("error"));&nbsp; };&nbsp; fetchData();}, []);function handleChange(e) {&nbsp; setSearch(e.target.value)}return (&nbsp; <div>&nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; className="input"&nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; placeholder="search country ..."&nbsp; &nbsp; &nbsp; value={search}&nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; />&nbsp; &nbsp; {data &&&nbsp; &nbsp; &nbsp; data.filter(item=> item.name.includes(search)).map((country) => (&nbsp; &nbsp; &nbsp; &nbsp; <div className="CountryList" key={country.name}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="CountryListImg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={country.flag} alt="" width="80px" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="countryName">{country.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="population">{country.population}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="region">{country.region}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {country.languages.map((language, languageIndex) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={languageIndex}>{language.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; ))}&nbsp; </div>);

Answer 2

您可以在呈现数据时在线过滤。记得做不区分大小写的字符串比较data&nbsp; .filter(&nbsp; &nbsp; (country) =>&nbsp; &nbsp; &nbsp; !search || country.name.toLowerCase().includes(search.toLowerCase())&nbsp; )&nbsp; .map(country => ...)如果搜索为假，即""过滤器返回真并返回国家，否则检查国家名称是否包含搜索值。保存输入值function handleChange(e) {&nbsp; const { value } = e.target;&nbsp; setSearch(value);}

Answer 3

首先，如果你没有安装 lodashnpm install lodash并使用去抖动// Lodash here <<<<<<<<<<<<<<<<import { debounce } from 'lodash';export default function CountryList() {&nbsp; const [data, setData] = useState([]);&nbsp; const [search, setSearch] = useState("");&nbsp; const fetchData = (text) => {// Fix your API with text search here <<<<<<<<<<<<<<,&nbsp; &nbsp; fetch("https://restcountries.eu/rest/v2/all")&nbsp; &nbsp; &nbsp; .then((res) => res.json())&nbsp; &nbsp; &nbsp; .then((result) => setData(result))&nbsp; &nbsp; &nbsp; .catch((err) => console.log("error"));&nbsp; };&nbsp; useEffect(() => {&nbsp; &nbsp; fetchData();&nbsp; }, []);&nbsp; function handleChange(e) {&nbsp; &nbsp; setSearch(e)&nbsp; &nbsp; onSearch(e)&nbsp; &nbsp; console.log(e.target.value);&nbsp; }&nbsp;&nbsp;&nbsp; const onSearch = debounce((text) => {&nbsp; &nbsp; &nbsp; fetchData(text);&nbsp; }, 500)&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="search country ..."&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={search}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; {data &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data.map((country) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="CountryList" key={country.name}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="CountryListImg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={country.flag} alt="" width="80px" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="countryName">{country.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="population">{country.population}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="region">{country.region}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {country.languages.map((language, languageIndex) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={languageIndex}>{language.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }