时间戳

首页 > 解决方案 > Redux + React Native 将产品添加到购物车不起作用

reactjs - Redux + React Native 将产品添加到购物车不起作用

问题描述

我是本机反应的新手，我正在尝试使用 redux 实现添加到购物车功能，当将整个产品传递到购物车时它正在工作，但这不是我想要的，因为我必须添加数量和输入用户选择的每个产品的文本，（使用户能够在结帐前填写它们）。这是主要代码（通过整个产品时工作正常）

const initialState = {
    cart: [],
    total: 0,
}
...
case ADD_TO_CART:
 return {
   ...state,
   cart: [action.payload, ...state.cart],
   total: state.total + action.payload.price
 }
...

这就是我现在正在尝试的

const initialState = {
    cart: [],
    addCart: {
      meal_id: '',
      name: '',
      price: '',
      quantity: 1,
      meal_details: ''
    },
    total: 0,
}
case ADD_TO_CART:
  return {
    ...state,
    addCart: {
     meal_id: action.payload.id,
     name: action.payload.name,
     price: action.payload.price,
     quantity: 1,
     meal_details: ''
    },
    cart: [this.addCart, ...state.cart],
    total: state.total + action.payload.price
 }

但它给出了错误， this.addCart将未定义添加到购物车数组中，我尝试addCart返回找不到变量 addCart 并且我使用state.addCart它将第一项添加为空 arr 并且每当我单击另一个产品添加它时添加最后一个单击

标签： reactjsreact-nativereact-redux

解决方案

访问 Redux 状态时，没有this. 此外，当您尝试更改对象时，您无法访问对象的属性，这也是您的主要代码有效但第二个代码段无效的原因。修复代码的最简单解决方案是addCart从您的状态中删除，因为数据等同于您的action.payload，然后在 reducer 中单独创建 addCart 对象。

const initialState = {
    cart: [],
    total: 0,
}

case ADD_TO_CART:
  let addCart = {
     meal_id: action.payload.id,
     name: action.payload.name,
     price: action.payload.price,
     quantity: 1,
     meal_details: ''
  }
  return {
    ...state,
    cart: [addCart, ...state.cart],
    total: state.total + action.payload.price
 }

推荐阅读