Javascript同时过滤几个选项

Question

我正在使用 React 创建一些需要过滤菜单的页面。我有一个狗数组，其中包含每只狗的信息，我正在尝试按其性情进行过滤。每只狗至少有三种气质，我一直在尝试检查它们是否至少具有过滤菜单中提交的一种气质。但似乎没有任何作用。

这是控制组件。

import {useEffect, useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {filteringDogs, getTemps, onSearchBreed, orderAscendingDogs, orderDescendingDogs} from "../store";

import styles from "./styles/SideBarComp.module.css";
import {useForm} from "../hooks";

export const SideBarComp = () => {
  const dispatch = useDispatch()

  const { dogs } = useSelector( state => state.dogs )

  const { temps } = useSelector( state => state.temps )
  useEffect(() => {
    dispatch(getTemps())
    
  }, [])

  

  const { breed, onInputChange } = useForm({
    breed: '',

  }) 

  const [selectedTemperaments, setSelectedTemperaments] = useState([]);

  const handleTempCheckboxChange = (tempName) => {
    // Update the selectedTemperaments array based on checkbox changes
    if (selectedTemperaments.includes(tempName)) {
      setSelectedTemperaments(
        selectedTemperaments.filter((temp) => temp !== tempName)
      );
    } else {
      setSelectedTemperaments([tempName, ...selectedTemperaments]);
    }

    dispatch(filteringDogs(selectedTemperaments))
  };

  // console.log(selectedTemperaments);

  const onSubmit = (event) => {
    event.preventDefault()
    dispatch(onSearchBreed({ breed }));
  }

  const onAscendingClick = (dogs) => { 
    dispatch(orderAscendingDogs(dogs));
    
  };

  const onDescendingClick = (dogs) => {
    dispatch(orderDescendingDogs(dogs)); 
    
  };


  

  return (
    <main className={styles.sideBar}>
      <form onSubmit={onSubmit} className={styles.searchSection}>
        <input
          className={styles.searchBar}
          type="text"
          placeholder="Golden retriever..."
          name="breed"
          value={breed}
          onChange={onInputChange}
        />
        <button type="submit" className={styles.searchButton}>
          Search
        </button>
        <section className={styles.filterSection}>
          <div className={styles.tempFilter}>
            <h3>Filter by temperaments</h3>
            <div className={styles.inputs}>
              {temps.map((item) => (
                <div key={item.id} className={styles.singleInput}>
                  <input
                    id={item.name}
                    name={item.name}
                    type="checkbox"
                    onChange={() => handleTempCheckboxChange(item.name)}
                  />
                  <label htmlFor={item.name}>{item.name}</label>
                </div>
              ))}
            </div>
          </div>
        </section>
      </form>
      <div className={styles.orderFilter}>
        <h3>Order</h3>
        <div className={styles.orderButtonsArea}>
          <button
            onClick={() => onAscendingClick(dogs)}
            className={styles.orderButtons}
          >
            A - Z
          </button>
          <button
            onClick={() => onDescendingClick(dogs)}
            className={styles.orderButtons}
          >
            Z - A
          </button>
        </div>
      </div>
    </main>
  );
};

这是我的商店和减速器

import { createSlice } from "@reduxjs/toolkit";

export const dogSlice = createSlice({
  name: "dogs",
  initialState: {
    dogs: [],
    loading: false,
    currentPage: 1,
    itemsPerPage: 8,
    totalPages: 0,
  },
  reducers: {
    startLoading: (state /* action */) => {
      state.loading = true;
    },
    setDogs: (state, action) => {
      state.dogs = action.payload;
      state.totalPages = Math.ceil(action.payload.length / 8);
      state.loading = false;
    },
    setCurrentPage: (state, action) => {
      state.currentPage = action.payload;
    },
    findbyDogBreed: (state, action) => {
      state.dogs = action.payload;
      state.loading = false;
    },
  },
});

// Action creators are generated for each case reducer function
export const {
  startLoading,
  setDogs,
  setCurrentPage,
  descendingOrder,
  ascendingOrder,
  findbyDogBreed,
} = dogSlice.actions;

import { setCurrentPage, setDogs, startLoading } from "./dogSlice";
import { dogIns } from "../../../api";

export const getDogs = (page = 1) => {
  return async (dispatch) => {
    dispatch(startLoading());

    const { data } = await dogIns.get("/dogs");

    dispatch(setDogs(data));
    dispatch(setCurrentPage(page));
  };
};

export const handlePages = (page = 1) => {
  return async (dispatch) => {
    dispatch(setCurrentPage(page));
  };
};

export const orderDescendingDogs = (dogs) => {
  return async (dispatch) => {
    dispatch(startLoading());

    const dogsSorted = [...dogs].sort((a, b) => {
      const nameA = a.name;
      const nameB = b.name;
      if (nameA > nameB) {
        return -1;
      }
      if (nameA < nameB) {
        return 1;
      }
      return 0;
    });
    dispatch(setDogs(dogsSorted));
  };
};

export const orderAscendingDogs = (dogs) => {
  return async (dispatch) => {
    dispatch(startLoading());

    const dogsSorted = [...dogs].sort((a, b) => {
      const nameA = a.name;
      const nameB = b.name;
      if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }
      return 0;
    });
    dispatch(setDogs(dogsSorted));
  };
};

export const onSearchBreed = ({ breed }) => {
  return async (dispatch) => {
    const { data } = await dogIns.get("/dogs");

    const dogsMatching = data.filter((item) =>
      item.name.toLowerCase().startsWith(breed.toLowerCase())
    );

    dispatch(setDogs(dogsMatching));
  };
};

export const filteringDogs = (selectedTemperaments) => {
  return async (dispatch) => {
    // console.log(selectedTemperaments);
    const { data } = await dogIns.get("/dogs");

    const dogsMatching = data.filter((dog) =>
      selectedTemperaments.some((temp) => dog.temperaments.includes(temp))
    );
    
    dispatch(setDogs(dogsMatching));
  };
};

我已经尝试过for循环，可能是我用得不好，但是没用。我一直在使用 AI，但这些选项也不起作用，我只是在 YouTube 上找到了当时用于过滤单个属性的选项。

Answer 1

在您的组件 SideBarComp 中，尝试

const handleTempCheckboxChange = (tempName) => {
    if (selectedTemperaments.includes(tempName)) {
      setSelectedTemperaments(selectedTemperaments.filter((temp) => temp !== tempName));
    } else {
      setSelectedTemperaments([tempName, ...selectedTemperaments]);
    }
  };

  useEffect(() => {
    dispatch(filteringDogs(selectedTemperaments));
  }, [selectedTemperaments]);