React问题：点击移除按钮后购物车无法重新渲染

核心问题 #

你直接修改了useSelector返回的本地变量products，但Redux的state是不可变的——必须通过dispatch触发action来更新store中的state，组件才会因为store变化重新订阅并渲染。现在你只是改了本地变量，Redux store根本没变化，所以组件不会重新渲染，那个useEffect也完全没用，它监听的是本地变量而非store的state。

修复步骤 #

1. 引入useDispatch钩子：用来向Redux store派发更新action。
2. 实现Redux的action和reducer：处理移除商品的逻辑，更新store中的state（注意要返回新数组，不能直接修改原数组）。
3. 修改remove函数：不再直接修改本地变量，而是派发移除action。
4. 移除无用的useEffect：Redux会自动监听store变化，无需额外监听本地变量。

修改后的完整代码 #

组件部分 #

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Link from "next/link"

const Cart = () => {
    const products = useSelector((state) => state)
    const dispatch = useDispatch()

    const remove = (ID) => {
        // 派发移除商品的action
        dispatch({ type: 'REMOVE_FROM_CART', payload: ID })
    }

    return (
        <div className='flex flex-wrap'>
            {products && products.map((product) => (
                <div className='bg-gray-700 border-white m-4 rounded-md min-w-[250px]' key={product.id}>
                    <div className='flex flex-col text-white p-4'>
                        <img src={product.image} alt="Image not loaded" />
                        <h3><b>Product Name:</b> {product.name}</h3>
                        <h3><b>Price:</b> ${product.price}</h3>
                        <button onClick={() => remove(product.id)} className='bg-gray-800 p-2 my-2 rounded-md hover:bg-black'>REMOVE</button>
                    </div>
                </div>
            ))}
            <Link href="/"> <button className='p-2 bg-orange-400 outline-sm  w-20'>HOME</button></Link>
        </div>
    )
}

export default Cart

Redux Reducer部分（需在store配置中添加） #

// 示例reducer，假设初始state是商品数组
const cartReducer = (state = [], action) => {
    switch (action.type) {
        case 'REMOVE_FROM_CART':
            // 返回新数组，保证state不可变
            return state.filter(product => product.id !== action.payload)
        // 可补充其他action逻辑（比如添加商品）
        default:
            return state
    }
}

export default cartReducer

关键说明 #

• Redux的state必须遵循不可变更新原则：永远不要直接修改state，要返回新的state对象/数组。
• useSelector会自动订阅store的变化，当store中的state更新后，组件会自动重新渲染，不需要额外的useEffect监听。

内容的提问来源于stack exchange，提问作者Riaz Bappy