如何在另一個組件中過濾或搜索服務(React)

注意：我的頁面卡片組件作業正常。如何過濾搜索組件中的卡片頁面組件？

我是新手，我不太明白我如何完成這項任務。

在 Search 組件中，我以固定方式放置它，因為我無法使用另一個組件過濾組件。

為方便起見，對準則進行了總結。

卡片頁

import React, {
  useEffect,
  useState
} from "react";
import classes from "./boxService.module.css";
import axios from "axios";


function BoxService() {
  const [test, SetTest] = useState([]);
  useEffect(() => {
    axios
      .get("http://localhost:8080/api/test")
      .then((response) => {
        SetTest(response.data);
      })
      .catch(() => {
        console.log("Error!");
      });
  }, []);


  return ({
        test.map((test, key) => { 
           <div className={classes.box}

            return ( 
            <Grid item xs = {2} key={key} >
              <div className={test.name} < div >
              <p className={test.description}</p>
            </Grid>
            );
          })}
        );
      }

export default BoxService;

搜索頁面

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

function Search() {
    const [searchTerm, setSearchTerm] = useState("");
    const [test, SetTest] = useState([]);

    //Chamada API
    useEffect(() => {
        axios
            .get("http://localhost:8080/api/test")
            .then((response) => {
                SetTest(response.data);
            })
            .catch(() => {
                console.log("Error");
            });
    }, []);

    return (
        <div>
        <input type = "text"
        placeholder = "Search..."
        onChange = {
            (event) => {
                setSearchTerm(event.target.value);
            }
        }/>
        {
            test.filter((val) => {
                    if (searchTerm === "") {
                        return val;
                    } else if (
                        val.nome.toLowerCase().includes(searchTerm.toLowerCase())
                    ) {return val;}
                }).map((val, key) => {
                    return ( <div className = "user"
                        key = {key} >
                        <p> {val.name} </p> </div>
                    );
                })
        } </div>
    );
}

export default Search;

uj5u.com熱心網友回復：

這是它應該/可能看起來如何的示例：

import React from "react";

function SearchBox({ setSearchTerm, searchTerm }) {
  const handleFilter = (e) => {
    setSearchTerm(e.target.value);
  };
  return (
    <>
      filter
      <input type="search" onChange={handleFilter} value={searchTerm} />
    </>
  );
}

export default function App() {
  const [searchTerm, setSearchTerm] = React.useState("");
  const [filteredResults, setFilteredResults] = React.useState([]);
  const [results, setResults] = React.useState([]);

  React.useEffect(() => {
    const fetchdata = async () => {
      const randomList = await fetch(`https://randomuser.me/api/?results=50`);
      const data = await randomList.json();

      const { results } = data;

      setResults(results);
    };
    fetchdata();
  }, []);

  React.useEffect(() => {
    const filterResults = results.filter((item) =>
      item.name.last.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredResults(filterResults);
  }, [searchTerm, results]);

  return (
    <div className="App">
      <SearchBox setSearchTerm={setSearchTerm} searchTerm={searchTerm} />
      <div>
        <ul>
          {filteredResults.map(({ name }, idx) => {
            return (
              <li key={idx}>
                {name.first} {name.last}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}

標籤：反应

上一篇：匯入引導程式時，svg在后面呈現方形

下一篇：反應表單如何基于打開/關閉切換獲取用戶資料