我正在做一个业余爱好项目，作为学习的一部分，通过制作一个类似“电子商务”的网站。所以我到了我在购物车中添加产品的部分，但我撞到了砖墙。我不知道如何索引它们，然后删除它们。我试过创建不同的变量来存储它们的ID，但它并没有真正起作用，因为默认值是0，每次我按下添加按钮，它们都有相同的ID 1，因为这是我增加0的原因。无论如何，我也试图将该变量存储在一个状态中，但它没有工作。我最近尝试的是使用UUID，但我不确定如何将ID发送到reducer并与之进行比较，这就是我迷路的地方。我如何比较产品的ID，更像是->我将与什么进行比较？我打算创建一个名为indexOfProduct的变量，然后该变量基本上是我的redux存储，其中包含我想要删除的产品的ID，一旦找到ID，我将创建一个没有它的存储的新示例。我怎么能这么做呢？我在尝试UUID方法之前发布了代码，以下是我的文件：
reducers.js

import React from 'react'
import $ from 'jquery'
const reducer = (state={productsInCart:[{}]}, action)=>
{
    let nextId = 0;
    switch(action.type)
    {
        case 'addToCart':
            return{
                
                ...state,
                productsInCart: [...state.productsInCart, {name: action.name, price: action.price, image: action.image, id: action.id}]            
            }
            
        case 'clearCart':
            return{
                ...state,
                productsInCart: []   
            }
        case 'removeProduct':
            return{

                ...state, 
                productsInCart:[state.productsInCart.filter(product=>product.id!==action.id)]}
        default:
            return state
    }
}
export default reducer;

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=()=>
        {
           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=>
                <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(product)}>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);

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'
class index extends Component {
    render() {
        let idCounter=0;
        
        const {productsInCart} = this.props;
        const productsList = [
            {
                name: 'Cool Hat',
                price: 50, 
                image: '/Hat.png',
            },
            {
                name: 'Dull Hat',
                price: 5, 
                image: '/Hat.png',
            },]
        const addWord=(product)=>
        {
            idCounter+=1
            store.dispatch({type: 'addToCart', name: product.name, price: product.price, image: product.image, id: idCounter})
        }
        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=>
                <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 className='addProductButton' variant='success' onClick={()=>addWord(product)}> <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);