热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Reactnative添加到购物车数量和总价格问题-Reactnativeaddtocartquantityandtotalpriceissue

Facinganissuewheremycartisnotupdatingthequantityandtotalpricecorrectlyafter2quantit

Facing an issue where my cart is not updating the quantity and total price correctly after 2 quantities.

面对我的购物车在2个数量后没有正确更新数量和总价的问题。

Using redux action during my ADD_TO_CART on press button, I will assign a new element into object of quantity:1

在按下按钮的ADD_TO_CART期间使用redux动作,我将为数量对象分配一个新元素:1

export function addToCart(card){
    return (dispatch) => {
        card.quantity = 1;
        dispatch({type: ADD_TO_CART, data:card});
        console.log(card);
    };
}

On my reducer, here is the function

在我的减速机上,这是功能

let cartState = { data: [], totalPrice: 0 };
const cartReducer = (state = cartState, action) => {
            switch (action.type) {
                case ADD_TO_CART:
                let totalPriceCart = 0;
                let checkforDuplicate = state.data.some(function (a){
                    if(a.sno === action.data.sno){
                        return true;
                    }
                });

                if(checkforDuplicate){
                    for (let i in state.data) {
                        if (state.data[i].sno === action.data.sno) {
                            state.data[i].quantity = action.data.quantity+1;
                            break;
                        }
                    }
                    for(let e in state.data){
                        totalPriceCart = totalPriceCart + (state.data[e].price*state.data[e].quantity);
                    }
                    return  {data: state.data, totalPrice: totalPriceCart };
                }

                let clOneArr= state.data.concat(action.data);
                for(let i in cloneArr){
                    totalPriceCart = totalPriceCart+(cloneArr[i].price*cloneArr[i].quantity);
                }

                return {...state, data : cloneArr, totalPrice: totalPriceCart }
                default:
                return state;
            }
        };

What am I doing here in the reducer is,

我在减速机里做的是,

  • If there is a duplicate item from adding to cart action object (detect by sno), will not concat into the main state array but update the quantity of existing item in the state
  • 如果添加到购物车操作对象(通过sno检测)中存在重复项目,则不会连接到主状态数组但会更新状态中现有项目的数量

  • Else will concat the array

    否则将连接数组

  • At the end, will count the total price of the whole item in state and pass it back to my cart to show the total based on the quantity*price

    最后,将计算整个项目的总价格并将其传回我的购物车,以显示基于数量*价格的总数

Issue is that, currently, my code only shows until 2x, when adding the same item for 3rd time, the quantity will stay at 2x and the price is not calculating correctly.

问题是,目前,我的代码只显示2倍,当第三次添加相同的项目时,数量将保持2倍,价格无法正确计算。

1 个解决方案

#1


-1  

you should mutate quantity of the state.data

你应该改变state.data的数量

if (checkforDuplicate) {

    for (let i in state.data) {
        if (state.data[i].sno === action.data.sno) {
            state.data[i].quantity = state.data.quantity + 1;
            break;
        }
    }
    for (let e in state.data) {
        totalPriceCart = totalPriceCart + (state.data[e].price * state.data[e].quantity);
    }
    return { data: state.data, totalPrice: totalPriceCart };
}

mutate using ==== Array.map()=======

mutate using ==== Array.map()=======

    let mutatedArr = state.data.map((item)=> {
        if (item.sno === action.data.sno) {
            item.quantity += 1;
        }
       return item;
    });
let totalPriceCart = 0;
 mutatedArr.forEach((item)=>{
totalPriceCart+ =  (item.price * item.quantity)
    })
    return { data: mutatedArr, totalPrice: totalPriceCart };

推荐阅读
  • 在进行前端JavaScript国际化(i18n)的过程中,为了从cookie中获取语言信息并动态加载相应资源,我决定将语言检测逻辑和i18n初始化代码直接嵌入到index页面中,使用了Velocity模板引擎的语法。这种方法不仅简化了代码结构,还提高了语言切换的灵活性和响应速度。 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 图像拼接技术深入解析:基于OpenCV 3.4的Stitching模块源码分析(下篇)
    本文继续深入探讨图像拼接技术,特别是在OpenCV 3.4的Stitching模块中的源码实现。通过与VLFeat的SIFT实现进行对比,详细分析了OpenCV在图像特征提取、匹配及拼接过程中的关键算法和技术细节,为读者提供了全面的技术解析和实践指导。 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 本题库精选了Java核心知识点的练习题,旨在帮助学习者巩固和检验对Java理论基础的掌握。其中,选择题部分涵盖了访问控制权限等关键概念,例如,Java语言中仅允许子类或同一包内的类访问的访问权限为protected。此外,题库还包括其他重要知识点,如异常处理、多线程、集合框架等,全面覆盖Java编程的核心内容。 ... [详细]
  • 在稀疏直接法视觉里程计中,通过优化特征点并采用基于光度误差最小化的灰度图像线性插值技术,提高了定位精度。该方法通过对空间点的非齐次和齐次表示进行处理,利用RGB-D传感器获取的3D坐标信息,在两帧图像之间实现精确匹配,有效减少了光度误差,提升了系统的鲁棒性和稳定性。 ... [详细]
  • JavaScript最初并非设计为纯粹的面向对象编程(OOP)语言,因为直到ES5标准中仍未引入类的概念。然而,随着ES6的发布,JavaScript正式引入了类的语法,使得开发者能够更加直观地实现继承机制。本文将深入探讨JavaScript中多样的继承实现方法,包括原型链、寄生组合式继承等技术,并分析它们的优缺点及适用场景。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • Android目录遍历工具 | AppCrawler自动化测试进阶(第二部分):个性化配置详解
    终于迎来了“足不出户也能为社会贡献力量”的时刻,但有追求的测试工程师绝不会让自己的生活变得乏味。与其在家消磨时光,不如利用这段时间深入研究和提升自己的技术能力,特别是对AppCrawler自动化测试工具的个性化配置进行详细探索。这不仅能够提高测试效率,还能为项目带来更多的价值。 ... [详细]
  • 2017广西邀请赛复盘:NWAFU全国邀请赛训练赛第八场
    本次训练赛(NWAFU全国邀请赛复盘之一)基于2017年广西邀请赛的赛题,重点解析了A、E、F、G等关键题目,旨在通过复盘帮助参赛者深入理解相关知识点和技术应用,为后续比赛提供宝贵经验。 ... [详细]
  • 利用ViewComponents在Asp.Net Core中构建高效分页组件
    通过运用 ViewComponents 技术,在 Asp.Net Core 中实现了高效的分页组件开发。本文详细介绍了如何通过创建 `PaginationViewComponent` 类并利用 `HelloWorld.DataContext` 上下文,实现对分页参数的定义与管理,从而提升 Web 应用程序的性能和用户体验。 ... [详细]
  • 这篇文章将揭示 Vue 和 React 组件库中五个鲜为人知的强大工具。这些工具均以纯 JavaScript 实现,功能卓越。其中,async-validator 是一个数据验证插件,不仅预置了 URL 和电子邮件的验证规则,还支持异步验证功能。 ... [详细]
  • 本文深入解析了如何通过自定义 ViewGroup 实现类似支付宝风格的酷炫雷达脉冲动画效果。文章详细介绍了自定义 ViewGroup 的原理和实现步骤,并结合实际案例展示了如何在 Android UI 设计中应用这一技术,为开发者提供了宝贵的参考和实践指导。 ... [详细]
  • 如何在DataGridView中实现带有图标的单元格显示
    本文详细探讨了在C# WinForms应用程序中,如何通过DataGridView控件实现带有图标的单元格显示。文章不仅提供了具体的实现方法,还深入解析了相关技术细节,对于希望提升用户界面交互体验的开发者而言,具有很高的参考价值。 ... [详细]
author-avatar
pang1995_313
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有