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(() => {

  const fetchData = () => {

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

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

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

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

  };

  fetchData();

}, []);

function handleChange(e) {

  setSearch(e.target.value)

}

return (

  <div>

    <input

      className="input"

      type="text"

      placeholder="search country ..."

      value={search}

      onChange={handleChange}

    />

    {data &&

      data.filter(item=> item.name.includes(search)).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 2

您可以在呈现数据时在线过滤。记得做不区分大小写的字符串比较

data

  .filter(

    (country) =>

      !search || country.name.toLowerCase().includes(search.toLowerCase())

  )

  .map(country => ...)

如果搜索为假，即""过滤器返回真并返回国家，否则检查国家名称是否包含搜索值。

保存输入值

function handleChange(e) {

  const { value } = e.target;

  setSearch(value);

}

Answer 3

首先，如果你没有安装 lodash

npm install lodash

并使用去抖动

// Lodash here <<<<<<<<<<<<<<<<

import { debounce } from 'lodash';

export default function CountryList() {

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

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

  const fetchData = (text) => {

// Fix your API with text search here <<<<<<<<<<<<<<,

    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) {

    setSearch(e)

    onSearch(e)

    console.log(e.target.value);

  }

  

  const onSearch = debounce((text) => {

      fetchData(text);

  }, 500)

    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>

    );

  }