产品页基于Redux实现升降序排序功能故障排查与修复

核心问题梳理 #

你的代码存在几个关键问题导致排序功能失效：

1. 排序逻辑归属错误：当前sort reducer操作的是购物车的state，但排序应该针对展示的商品列表，而非购物车数据
2. Select组件事件绑定错误：option标签的onClick事件无效，需改用select的onChange事件
3. 缺少排序方向区分：仅实现了升序逻辑，未处理降序需求
4. 搜索状态初始化错误：data初始值为数组，与输入框的字符串类型不匹配

分步修复方案 #

1. 重构Redux状态，新增商品列表Slice #

创建单独的productSlice.js管理商品列表与排序状态，与购物车状态分离：

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

const ProductSlice = createSlice({
  name: 'products',
  initialState: {
    list: [],
    sortDirection: 'none' // 可选值：none / asc / desc
  },
  reducers: {
    setProducts(state, action) {
      state.list = action.payload;
    },
    setSortDirection(state, action) {
      state.sortDirection = action.payload;
    }
  }
});

export const { setProducts, setSortDirection } = ProductSlice.actions;
export default ProductSlice.reducer;

更新Redux Store配置，合并新的Slice：

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from './slice';
import productReducer from './productSlice';

export const store = configureStore({
  reducer: {
    cart: cartReducer,
    products: productReducer
  }
});

2. 修改Home组件，实现正确的排序与筛选逻辑 #

import React, { useState, useEffect } from 'react'
import useData from './useAPI'
import { useDispatch, useSelector } from 'react-redux'
import { add } from './Redux/slice'
import { setProducts, setSortDirection } from './Redux/productSlice'

export const Home = () => {
    const [searchQuery, setSearchQuery] = useState('')
    const rawData = useData()
    const { list: products, sortDirection } = useSelector(state => state.products)
    const dispatch = useDispatch()

    // 初始化商品列表到Redux
    useEffect(() => {
        if (rawData.length > 0) {
            dispatch(setProducts(rawData))
        }
    }, [rawData, dispatch])

    const handleAddToCart = (product) => {
        dispatch(add(product))
    }

    const handleSortChange = (e) => {
        dispatch(setSortDirection(e.target.value))
    }

    // 合并筛选与排序逻辑
    const processedProducts = products
        .filter(val => {
            if (!searchQuery) return val
            return val.title.toLowerCase().includes(searchQuery.toLowerCase())
        })
        .sort((a, b) => {
            if (sortDirection === 'asc') return a.price - b.price
            if (sortDirection === 'desc') return b.price - a.price
            return 0
        })

    return (
        <>
            <div className="navbar p-4 h-24">
                <input
                    type="text"
                    placeholder='Search Your data....'
                    className='my-2 h-1/2 w-96 border-2 text-center text-l border-slate-400 rounded-l-xl'
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                />
                <button className='bg-slate-300 text-xl h-1/2 w-24 rounded-r-xl border-2 border-slate-200 font-extrabold '>Search</button>
            </div>
            <div className="my-4">
                <select onChange={handleSortChange} className="p-2 border rounded">
                    <option value="none">Sort</option>
                    <option value="asc">Low to High</option>
                    <option value="desc">High to Low</option>
                </select>
            </div>
            <div className="product flex flex-wrap justify-center w-screen h-full cursor-pointer">
                {processedProducts.map(product => (
                    <div className='productCard h-84 bg-slate-50 w-72 flex justify-center flex-wrap rounded m-12 px-2 py-2 hover:scale-95 ' key={product.id}>
                        <img src={product.image} alt="product" className='h-32 w-40' />
                        <div className='items-center w-full h-1/2 my-2 text-m'>
                            <h2 className=' text-sm font-semibold py-1 '>{product.title}</h2>
                            <h3 className='text-green-900 font-semibold py-1'>₹{product.price}</h3>
                            <p className='text-blue-950 font-semibold py-1'>{product.rating.rate}⭐</p>
                            <button
                                className='bg-purple-800 text-white font-semibold text-m px-2 py-2  rounded-xl hover:bg-blue-800'
                                onClick={() => handleAddToCart(product)}
                            >ADD TO CART</button>
                        </div>
                    </div>
                ))}
            </div>
        </>
    )
}

3. 清理CartSlice中的无效代码 #

删除原CartSlice中不属于购物车职责的sort reducer：

import { createSlice } from "@reduxjs/toolkit";
const CartSlice=createSlice({
    name:'cart',
    initialState:[],
    reducers:{
        add(state,action){
            state.push(action.payload)
        },
        remove(state,action){
            return state.filter((item)=>item.id!==action.payload)
        }
    }
})

export const{add, remove}=CartSlice.actions
export default CartSlice.reducer

内容的提问来源于stack exchange，提问作者Tushar Kumar