Question

我需要一些帮助。我尝试了多种方法来解决我的问题，但我做不到，没有任何效果。当我单击单个“水果”时，我想更改水果和蔬菜阵列中的buyQuantity，我从action..it获得了ID。它有效，但是当我在下面单击水果项目时尝试使用此reducer时，状态会完全改变。我只说了水果数组，像这样：

state= [
        {id: 1, name:"apples", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 2,name:"pears", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 3,name:"bananas", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 4,name:"oranges", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 5,name:"plums", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
      ],

我的代码是：

const initialState = {
loadingState: {},
productsCategories: [],
products: {
   fruits: [
        {id: 1, name:"apples", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 2,name:"pears", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 3,name:"bananas", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 4,name:"oranges", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 5,name:"plums", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
      ],
vegetables: [
        {id: 1,name:"potatos",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 2,name:"tomatos",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 3,name:"onions",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 4,name:"carrots",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 5,name:"pepper",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
}
}

const productsCategoriesAndProducts = (state = initialState, action) => {



switch (action.type) {

case "ADD_PRODUCT":`enter code here`

  return state.products.fruits.map(fruit => {
    if (fruit.id === action.id) {
      return { ...fruit, buyQuantity: fruit.quantity + 1 }

    };

    return fruit;

  });

default:
  return state;
  }
}
export default productsCategoriesAndProducts;

请帮助。谢谢您的帮助。

Answer 1

您应该在要更新的每个级别上复制 entire 状态对象。

case "ADD_PRODUCT":`enter code here`

  return {
    ...state,
    products: {
      ...state.products,
      fruits: state.products.fruits.map(fruit => {
        if (fruit.id === action.id) {
          return { ...fruit, buyQuantity: fruit.quantity + 1 }
        };
        return fruit;
      })
    },
  };

Answer 2

Sandbox

尝试扁平化数据模型。这里没有分割蔬菜和水果的意义。如果您只需要水果，请使用filter。通过使用复合ID（category_product，例如fruit_apple），还可以非常有效地选择单数乘积。

这不是严格的规则，而是个人偏好，但是请尝试将您的逻辑功能与化简功能分开。在此示例中，我从减速器中分离出incBuyQuantity：

// Flattened Data Model
const initState = {
  loadingState: {},
  productsCategories: [],
  products: [
    {
      id: "fruit_apples",
      name: "apples",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "fruit"
    },
    {
      id: "fruit_pears",
      name: "pears",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "fruit"
    },
    {
      id: "vegetable_potatos",
      name: "potatos",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "vegetable"
    },
    {
      id: "vegetable_tomatos",
      name: "tomatos",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "vegetable"
    }
  ]
};

// Logic
function incBuyQuantity(state, action) {
  return {
    ...state,
    products: state.products.map((product) =>
      action.id === product.id
        ? { ...product, buyQuantity: product.buyQuantity + 1 }
        : product
    )
  };
}

// Reducer
function reducer(state = initState, action) {
  switch (action.type) {
    case "INC_PRODUCT":
      return incBuyQuantity(state, action);
    default:
      return state;
  }
};

// Example
const action = { type: "INC_PRODUCT", id: "fruit_apples" };
const nextState = reducer(initState, action)
console.log(nextState.products[0].buyQuantity); // => 1

React Redux：更新对象数组中的项目

2 个答案: