Javascript React Redux why is'；我的代码是否正在从状态中删除项？

我一直在一个购物车上工作，一旦我点击一个产品，它就会将其删除，但它不会。我已经使用UUID分配给我要添加的产品，然后我将其传递给reducer，然后我将其保存到状态为id，然后在removeProduct案例中，我过滤状态以删除具有该确切id的确切产品，但它不会删除它。就是这样。我怎样才能解决这个问题

以下是与此问题相关的文件： index.js：

import React, { Component } from 'react';
import {connect} from 'react-redux'
import {store} from './store'
import {Button, Nav, Navbar, NavbarBrand, NavItem, NavLink} from 'react-bootstrap'
import {LinkContainer} from 'react-router-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import {MdShoppingBasket, MdAddShoppingCart} from 'react-icons/md'
import './index.css'
import uuid from 'uuid/v4'
class index extends Component {
    render() {        
        const {productsInCart} = this.props;
        const productsList = [
            {
                name: 'Cool Hat',
                price: 50, 
                image: 'https://images.pexels.com/photos/4429555/pexels-photo-4429555.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'
            },
            {
                name: 'Dull Hat',
                price: 5, 
                image: 'https://images.pexels.com/photos/4429555/pexels-photo-4429555.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'
            },]
        const addProduct=(product)=>
        {
            store.dispatch({type: 'addToCart', name: product.name, price: product.price, image: product.image, id: uuid()})
        }
        return (
            <div>
                <Navbar className ='navbar' variant='light'>
                    <NavbarBrand>Home</NavbarBrand>
                    <Nav className='ml-auto'>
                        <NavItem>
                            <NavLink href='/cart'>
                                <span className='cartIndicator'><MdShoppingBasket size={25}></MdShoppingBasket>
                                <span>{productsInCart.length}</span></span>
                            </NavLink>
                        </NavItem>
                    </Nav>
                </Navbar>
                {productsList.map((product, id)=>
                <div className='productsList' key={id}>
                    <div className='productShow'>
                    <h3 className='productName'>{product.name}</h3>
                    <img className='productImage'src={product.image}></img>
                    <p className='productPrice'><strong>$ {product.price}.00</strong></p>
                    <Button className='addProductButton' variant='success' onClick={()=>addProduct(product, id)}> <MdAddShoppingCart size={20}></MdAddShoppingCart> <strong>Add to cart </strong> </Button>

                    </div>
                </div>)}
            </div>
        );
    }
}
const mapStateToProps=(state={productsInCart: [{}]})=>
{
    return{
        productsInCart: state.productsInCart
    }
}

export default connect(mapStateToProps)(index);

cart.js：

import React, { Component } from 'react';
import {Button, Nav, Navbar, NavbarBrand, NavItem, NavLink} from 'react-bootstrap'
import {MdHome} from 'react-icons/md'
import {connect} from 'react-redux'
import {store} from './store'
class cart extends Component {
    render() {
        const {productsInCart} = this.props;
        const clearCart=()=>
        {
            store.dispatch({type: 'clearCart'})
        }
        const removeProduct=(id)=>
        {
            store.dispatch({type:'removeProduct'})
           

        }
        
        return (
            <div>
                <Navbar variant='dark' bg='success'>
                    <NavbarBrand>Your cart</NavbarBrand>
                    <Nav className='ml-auto'>
                        <NavItem>
                            <NavLink href='/home'>
                                <MdHome size={25}></MdHome>
                            </NavLink>
                        </NavItem>
                    </Nav>
                </Navbar>
                {productsInCart.map((product, index)=>
                <div className='productsList'>
                    <div className='productShow'>
                    <h3 className='productName'>{product.name}</h3>
                    <img className='productImage'src={product.image}></img>
                    <p className='productPrice'><strong>$ {product.price}.00</strong></p>
                    <Button variant='danger'><strong onClick={()=>removeProduct(index)}>Remove product</strong></Button>
                    </div>

                </div>)}
                <Button onClick={()=>clearCart()}>Clear Cart</Button>
            </div>
        );
    }
    
}
const mapStateToProps=(state={productsInCart: [{}]})=>
{
    return{
        productsInCart: state.productsInCart
    }
}

export default connect(mapStateToProps)(cart);

import React，{Component}来自'React'；
从“react bootstrap”导入{按钮、导航、导航栏、导航栏、导航栏、导航项、导航链接}
从'react icons/md'导入{MdHome}
从“react redux”导入{connect}
从“/store”导入{store}
类cart扩展组件{
render（）{
const{productsInCart}=this.props；
常量clearCart=（）=>
{
dispatch（{type:'clearCart'}）
}
常量removeProduct=（id）=>
{
dispatch（{type:'removeProduct'}）
}
返回(
你的车
{productsInCart.map（（产品，索引）=>
{product.name}
${product.price}.00
removeProduct（index）}>removeProduct
)}
clearCart（）}>清除购物车
);
}
}
const mapStateToProps=（state={productsInCart:[{}]}）=>
{
返回{
productsInCart:state.productsInCart
}
}
导出默认连接（MapStateTops）（购物车）；

所以我找到了解决方案，基本上我不得不稍微更改一下ID。我已经在index.js中手动为我的产品添加了一个ID，然后每当我按下“添加到购物车”按钮时，我都会将此ID分配给产品，如下所示：

const addProduct=（product）=>{store.dispatch（{type:'addToCart'，name:product.name，price:product.price，image:product.image，id:product.id}）}

然后我换了一点减速器。我的removeProduct案例就是这样的：

案例“removeProduct”：让updatedCart=[…state.productsInCart]const index=state.productsInCart.findIndex（product=>product.id==action.id）控制台.log（index）if（index>=0 | | index>=-1）{updatedCart.splice（index，1）}返回{…state，productsInCart:updatedCart}

---

基本上，这里要做的是我首先初始化了我的购物车的一个新实例，它是当前购物车的一个总副本，在删除所选元素后，它将保存新购物车的值，然后，我创建了一个变量，该变量必须在我想要删除的项的状态下找到索引，一旦找到索引，我就确保使用上面的if语句找到它，一旦它返回true（意味着元素已经找到并准备删除）我调用updatedCart holder的splice函数并告诉它删除元素，然后在删除元素后，我只需将updatedCart添加到状态并显示给用户。

您已经编写了

state.productsInCart.filter（product=>product！==action.id）

。这是将产品与操作ID进行比较，我不认为一个产品会等于一个操作ID。您可能想将产品ID与操作ID进行比较吗？如果是这样，请尝试

state.productsInCart.filter（product=>product.id！==action.id）

。事实上，我几秒钟前就找到了解决方案，稍后我会详细发布它，但我感谢您花时间回答我的问题：）

import React, { Component } from 'react';
import {Button, Nav, Navbar, NavbarBrand, NavItem, NavLink} from 'react-bootstrap'
import {MdHome} from 'react-icons/md'
import {connect} from 'react-redux'
import {store} from './store'
class cart extends Component {
    render() {
        const {productsInCart} = this.props;
        const clearCart=()=>
        {
            store.dispatch({type: 'clearCart'})
        }
        const removeProduct=(id)=>
        {
            store.dispatch({type:'removeProduct'})
           

        }
        
        return (
            <div>
                <Navbar variant='dark' bg='success'>
                    <NavbarBrand>Your cart</NavbarBrand>
                    <Nav className='ml-auto'>
                        <NavItem>
                            <NavLink href='/home'>
                                <MdHome size={25}></MdHome>
                            </NavLink>
                        </NavItem>
                    </Nav>
                </Navbar>
                {productsInCart.map((product, index)=>
                <div className='productsList'>
                    <div className='productShow'>
                    <h3 className='productName'>{product.name}</h3>
                    <img className='productImage'src={product.image}></img>
                    <p className='productPrice'><strong>$ {product.price}.00</strong></p>
                    <Button variant='danger'><strong onClick={()=>removeProduct(index)}>Remove product</strong></Button>
                    </div>

                </div>)}
                <Button onClick={()=>clearCart()}>Clear Cart</Button>
            </div>
        );
    }
    
}
const mapStateToProps=(state={productsInCart: [{}]})=>
{
    return{
        productsInCart: state.productsInCart
    }
}

export default connect(mapStateToProps)(cart);