Rumah  >  Soal Jawab  >  teks badan

Cara menggunakan berbilang penapis menggunakan Redux Toolkit

Saya cuba menapis data mengikut kategori seperti jenis, jenama, warna, jantina menggunakan Redux Toolkit. Penapis berfungsi secara individu, tetapi penapis tidak berfungsi bersama-sama. Jika saya menapis jenama dahulu dan kemudian warna, penapis jenama tidak berfungsi. Apakah yang perlu saya lakukan untuk membuat ini berfungsi?

const initialState = {
    products: data,
    filteredItems: data,
}

export const filterSlice = createSlice({
    name: "filter",
    initialState,
    reducers: {
        filterCategory: (state, action) => {
            if (action.payload === "All") {
                return initialState
            } else
            state.filteredItems = state.products.filter(
                (item) => item.category === action.payload
            ) 
        },
        filterGender: (state, action) => {
            state.filteredItems = state.products.filter(
                (item) => item.gender === action.payload
            ) 
        },
        filterColor: (state, action) => {
            state.filteredItems = state.products.filter(
                (item) => item.color === action.payload
            )
        },
        filterBrand: (state, action) => {
            state.filteredItems= state.products.filter(
                (item) => item.brand === action.payload
            )
        },
    }
})

Saya cuba menulis penapis dalam pengurangan tetapi masih tidak berfungsi

P粉600845163P粉600845163263 hari yang lalu406

membalas semua(1)saya akan balas

  • P粉978742405

    P粉9787424052024-02-22 10:06:57

    Saya mungkin melakukan sesuatu yang serupa

    const initialState = {
        products: data,
        filteredItems: data,
        filters: {}
    }
    
    reducers: {
        filterCategory: (state, action) => {
            if (action.payload === "All") {
                return initialState
            } else {
                state.filters = { ...state.filters, category: action.payload }
                state.filteredItems = state.products;
            ) 
        },
        // ...etc.
        Object.entries(state.filters).forEach(([key, value]) => {
            state.filteredItems = state.filteredItems.filter(
                (item) => item[key] === value
            );
        });
        return state;
    }

    supaya anda boleh menyimpan penapis yang aktif dan kemudian tetapkan Item yang ditapis kepada senarai penuh item dan gunakan setiap penapis secara individu.

    balas
    0
  • Batalbalas