第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React.js:你如何實現(xiàn)搜索功能?

React.js:你如何實現(xiàn)搜索功能?

阿晨1998 2023-02-24 15:24:30
我設(shè)法從API獲取數(shù)據(jù)。現(xiàn)在我想在不點擊的情況下從搜索輸入中獲取特定數(shù)據(jù)。我想我需要這里的過濾功能。我設(shè)法聽取了點擊的輸入。但是如何獲取數(shù)據(jù)呢?任何幫助將不勝感激。這是我的代碼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>    );  }
查看完整描述

3 回答

?
慕的地10843

TA貢獻1785條經(jīng)驗 獲得超8個贊

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>

);


查看完整回答
反對 回復 2023-02-24
?
滄海一幻覺

TA貢獻1824條經(jīng)驗 獲得超5個贊

您可以在呈現(xiàn)數(shù)據(jù)時在線過濾。記得做不區(qū)分大小寫的字符串比較


data

  .filter(

    (country) =>

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

  )

  .map(country => ...)

如果搜索為假,即""過濾器返回真并返回國家,否則檢查國家名稱是否包含搜索值。


保存輸入值


function handleChange(e) {

  const { value } = e.target;

  setSearch(value);

}


查看完整回答
反對 回復 2023-02-24
?
慕蓋茨4494581

TA貢獻1850條經(jīng)驗 獲得超11個贊

首先,如果你沒有安裝 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>

    );

  }



查看完整回答
反對 回復 2023-02-24
  • 3 回答
  • 0 關(guān)注
  • 187 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號