时间戳

首页 > 解决方案 > React-Redux 为什么我的代码没有从状态中删除项目？

javascript - React-Redux 为什么我的代码没有从状态中删除项目？

问题描述

我一直在研究一个购物车，一旦我点击一个产品，它就会删除它，但它没有。我已经使用 UUID 分配给我正在添加的产品，然后我将它传递给减速器，然后我将它作为 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);

减速器.js：

import React from 'react'
import $ from 'jquery'
import uuid from 'uuid/v4'
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!==action.id)]}
        default:
            return state
    }
}
export default reducer;

购物车.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);

标签： javascriptreactjsredux

解决方案

所以我找到了解决方案，基本上我不得不稍微更改一下 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 案例的样子： case 'removeProduct': let updatedCart = [...state.productsInCart] const index = state.productsInCart.findIndex(product=>product.id===action.id) console.log(index) if(index>=0 || index>=-1) { updatedCart.splice(index,1) } return{ ...state, productsInCart: updatedCart } 基本上这里发生的事情是我首先初始化了我的购物车的一个新实例，这是当前购物车的一个完整副本，在删除所选元素后将保存新的值，然后我创建了一个变量找到我要删除的项目状态的索引，一旦找到，我确保我通过使用上面的 if 语句找到它，一旦它返回 true（意味着元素已找到并准备好已删除）我调用 updatedCart 持有人的拼接函数并告诉它删除元素，然后在删除元素后，我只需将 updatedCart 添加到状态并将其显示给用户。

推荐阅读