如何处理复选框数组以在 ReactJS 中创建功能过滤器？

Question

对不起我的英语不好，我来自阿根廷。

我需要管理一组复选框来制作过滤器。 我在一辆虚构的租车 web 工作（我还在学习，这是一种练习），我希望当我选中一个或多个复选框时，它只显示具有这些特征的汽车。 汽车特性是 un a.json 文件（api 调用）。

这是我为 map 创建并显示在布局中的复选框数组。

    export const features = [
  { name: "Manual Transmission", checked: false },
  { name: "5 seats", checked: false },
  { name: "Convertibles", checked: false },
  { name: "Automatic Transmission", checked: false },
  { name: "7 seats or more", checked: false },
];

这是组件“过滤器”

import { useContext, useEffect, useState } from "react";
import { v1 as uuidv1 } from "uuid";
import { features } from "../../utils/features";
import "./styles.css";
import { FilterContext } from "../../contexts/FilterContext";
import useInput from "../../hooks/useInput";
import { Carlist } from "../CarList";

export const Filter = () => {
  const carsData = useContext(FilterContext);

  const [filteredCars, setFilteredCars] = useState([]);

  const [select, handleSelect] = useInput();

  const [checkedValues, setCheckedValues] = useState([]);

  const handleChecked = (e) => {
  };

/*   const featuresList = carsData.map((data) => data.Features2);

  const featuresArray = Object.keys(featuresList).map(function (key) {
    return featuresList[key];
  }); */

  useEffect(() => {
    const filterSelect = carsData.filter((car) =>
      car.VehGroup.includes(select)
    );
    setFilteredCars(filterSelect);
  }, [select, carsData, checkedValues]);

  return (
    <div className="search-container">
      <div className="filter-container">
        <div className="filter-select-container">
          <h2>Filter by</h2>
          <select
            className="filter-select"
            onChange={handleSelect}
            value={select}
          >
            <option value="">All</option>
            {carsData.map((data) => (
              <option key={uuidv1()} value={data.VehGroup}>
                {data.VehGroup}
              </option>
            ))}
          </select>
        </div>
        <div className="filter-checkbox-container">
          {features.map((carFeature) => {
            return (
              <div key={carFeature.name} className="filter-checkbox">
                <input
                  onChange={handleChecked}
                  name={carFeature.feature}
                  type="checkbox"
                />
                <label htmlFor={carFeature.feature}>{carFeature.name}</label>
              </div>
            );
          })}
        </div>
      </div>
      <Carlist carsData={filteredCars} />
    </div>
  );
};

卡片清单：

import "./styles.css";
import { v1 as uuidv1 } from "uuid";
import { CardCard } from "../CarCard";

export const Carlist = ({ carsData }) => {
  return (
    <div className="carList-container">
      {carsData.map((data) => (
        <CardCard
          airConditionInd={data.AirConditionInd}
          code={data.Code}
          features2={data.Features2}
          name={data.Name}
          pictureURL={data.PictureURL}
          rates={data.Rates}
          vehGroup={data.VehGroup}
          key={uuidv1()}
        />
      ))}
    </div>
  );
};

.JSON https://api.jsonbin.io/b/61c466a75763ef239c4c0c95

Answer 1

在您的handledChecked function 上，您应该通过将新值推送到此state 来使其将选中的元素添加到您的filteredCars state。

setFilteredCars(oldArray => [...oldArray, newElement]);

newElement 可能是 object 因为您的主数组是对象数组。