Question

您好，我正在尝试使用复选框对我获取的数据实施过滤器。我首先针对性别进行尝试。当我单击“男性”复选按钮时，我的控制台上会登录男性用户列表，但浏览器上未显示任何内容。当我点击“女性”或“其他”时，同样适用。同样，如何将性别过滤器功能与搜索功能合并？非常感谢您的意见。我的代码如下：

import React, { useState, useEffect } from "react";
import './App.css';

import Profiles from "./components/Profiles";
import Footer from "./components/Footer";
import { USER_PER_PAGE } from "../src/utils/constants";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
 

const App = () => {
  
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);

  const [query, setQuery] = useState("");
  

  const search = (i) => {
    // setTotalPages(i.length / USER_PER_PAGE)
    return i.filter(res => res.FirstName.toLowerCase().indexOf(query) > -1 || 
      res.LastName.toLowerCase().indexOf(query.toLowerCase()) > -1);
  };

  const genderFilter = (arr, gender) => {    
    if (gender === "male") {
      console.log(arr.filter(res => res.Gender.toLowerCase() === "male"));
      return arr.filter(res => res.Gender.toLowerCase() === "male");
    } else if (gender === "female") {
      console.log(arr.filter(res => res.Gender.toLowerCase() === "female"));
      return arr.filter(res => res.Gender.toLowerCase() === "female");
    } else if (gender === "others") {
      console.log(arr.filter(res => res.Gender.toLowerCase() !== "male" && res.Gender.toLowerCase() !== "female"));
      return arr.filter(res => res.Gender.toLowerCase() !== "male" && res.Gender.toLowerCase() !== "female"));
    } else {
      console.log(arr)
      return arr;
    }
    
  };
  
  // To select how many persons you can view per page
  const startIndex = (page - 1) * USER_PER_PAGE;

  // To filter with search bar. This working very well.
  // const selectedProfiles = search(items).slice(startIndex, startIndex + USER_PER_PAGE);

  // To filter with checkbox
  const selectedProfiles = genderFilter(items).slice(startIndex, startIndex + USER_PER_PAGE);

  useEffect(() => {
    fetch("https://api.enye.tech/v1/challenge/records")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.records.profiles);

          setTotalPages(Math.ceil(result.records.profiles.length / USER_PER_PAGE));
          console.log(result.records.profiles.length)
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  const handleClick = (num) => {
    setPage(num)
  }

  

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div className="py-5 main">
        <div className="topnav">
          <div className="search-container">
            <form action="#">
              <input 
                type="search" 
                placeholder="Search.." 
                name="search"
                value={query}
                onChange={(e) => setQuery(e.target.value)} />
              <button type="submit">
                <FontAwesomeIcon icon={faSearch} />
              </button>
            </form>
          </div>
          <div className="filter">
            <div className="form-check">
              <span>
                <input 
                  className="form-check-input" 
                  type="checkbox" 
                  // checked="checked"
                  value="male"
                  onChange={() => genderFilter(items,"male")}
                  id="male" />
                <label 
                  className="form-check-label" 
                  htmlFor="male">
                  Male
                </label>
              </span>
              <span>
                <input 
                  className="form-check-input" 
                  type="checkbox" 
                  value="female"
                  onChange={() => genderFilter(items,"female")} 
                  id="female" />
                <label 
                  className="form-check-label" 
                  htmlFor="female">
                  Female
                </label>
              </span>
              <span>
                <input 
                  className="form-check-input" 
                  type="checkbox" 
                  value="others" 
                  onChange={() => genderFilter(items, "others")}
                  id="others" />
                <label 
                  className="form-check-label" 
                  htmlFor="others">
                  Others
                </label>
              </span>
            </div>
          </div>
        </div>
        <div className="regions-grid py-5">
          {selectedProfiles.map(i => (
            <Profiles profile={i} key={i.Email} />
          ))}
        </div>
        <Footer
          totalPages={totalPages}
          handleClick={handleClick}
          selectedProfiles={selectedProfiles}
          />
      </div>     
    );
  }
}

export default App;

Answer 1

如果您不设置新状态，您的组件将不会更新。你应该有类似的东西：

const [filteredItems, setFilteredItems] = useState([]);
const [items, setItems] = useState([]);

const genderFilter = (gender) => {    
if (gender === "male") {
  const newFilter = items.filter(res => res.Gender.toLowerCase() === "male");
  return [...filteredItems, ...newFilter]
} else if (gender === "female") {
  const newFilter = items.filter(res => res.Gender.toLowerCase() === "female");
  return [...filteredItems, ...newFilter]
} else if (gender === "others") {
  const newFilter =  items.filter(res => res.Gender.toLowerCase() !== "male" && res.Gender.toLowerCase() !== "female"));
  return [...filteredItems, ...newFilter]
} else {
  console.log(arr)
  return arr;
}

};

//on your events:
onChange={() => setFilteredItems(genderFilter("male"))}

如何使用反应钩子中的复选框过滤获取的数据

1 个答案: