时间戳

首页 > 解决方案 > 如何使工作搜索栏通过组件传递道具？

javascript - 如何使工作搜索栏通过组件传递道具？

问题描述

我想过滤数据并在搜索栏中实现。在Hook/index.js组件中，我在useEffects中获取和过滤数据。然后我在App.js中传递道具。之后我有一个Searchbar组件，我在其中收听输入，并且它必须在这里工作。我得到undefined。

钩子/index.js组件


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

import "./hook.scss";

export default () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  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(() => {
    const searchResult =
      data && data.filter((item) => item.name.toLowerCase().includes(search));
    setSearch(searchResult);
  }, []);

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

  return [data, error];
};

应用程序.js


import React, { useState }from "react";
import Header from "./components/Header";
import SearchBar from "./components/SearchBar";
import Flag from "./components/Flag";
import useCountries from "./Hooks";
import CountryList from "./components/CountryList";



import "./App.scss";

export default function App()  {
  const [data, error] = useCountries();

  
  return (
    <div className="App">
      <SearchBar />  //   {/*this throws an error <SearchBar data={data}/> */}
      <Header />
      {data &&
        data.map((country) => (
          <div className="CountryList" key={country.name}>
            <Flag flag={country.flag} />
            <CountryList
              population={country.population}
              name={country.name}
              region={country.region}
            />
            {country.languages.map((language, languageIndex) => (
              <CountryList key={languageIndex} language={language.name} />
            ))}
           
          </div>
        ))}
      <useCountries />
    </div>
  );
  return [data, error]
}

搜索栏组件



import React, {useState} from "react";


import "./SearchBar.scss";

export default function SearchBar({data}) {
    const [search, setSearch] = useState("");

   function handleChange(e) {
    setSearch(e.target.value);
  } 
  return (
    <div className="SearchBar">
      <input
        className="input"
        type="text"
        placeholder="search country ..."
        value={data}
        onChange={handleChange}
      />

      {data && data.filter((item) => item.name.toLowerCase().includes(search))}
    </div>
  );
};

标签： javascriptreactjs

解决方案

您将数据变量发送到输入而不是搜索变量。

在 JS 过滤器中返回数组并且 DOM 不能显示数组，因为它不是 html 或 jsx，所以您需要使用 map 将数组转换为 jsx。使用地图，您可以返回数组或 jsx

   <div className="SearchBar">
        <input
           className="input"
           type="text"
           placeholder="search country ..."
           value={search} // change here 
           onChange={handleChange}
     />
     <ul>{(data || []).filter((item) => item.name.toLowerCase().includes(search)).map(e=>(<li key={e.name}>{e.name}</li>))}</ul> /change here
    </div>

推荐阅读