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

我需要一些帮助。我尝试了很多方法来解决我的问题，但我就是做不到，什么都不管用。 我想更改水果和蔬菜数组中的buyQuantity，当单击单个“水果”时，我从action获得id。它可以工作，但当我尝试下面的减数器时，当我单击水果项目时，我的状态完全改变了。我只得到了我说的水果数组，如下所示：

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;

请帮忙。 感谢您的帮助。

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

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;
      })
    },
  };

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

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;
      })
    },
  };

尝试展平您的数据模型。在这里把蔬菜和水果分开是没有意义的。如果您只需要水果，请使用

过滤器

。通过使用复合id（

category\u product

，如

fruit\u apple

），它还可以非常有效地选择单一产品

这比严格的规则更符合个人偏好，但请尝试将逻辑函数从减缩函数中分离出来。在本例中，我已从减速器中拆分出

incBuyQuantity

：

//展平数据模型
常量initState={
加载状态：{}，
产品目录：[]，
产品：[
{
id:“水果苹果”，
名称：“苹果”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“水果”
},
{
id:“水果梨”，
名称：“梨”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“水果”
},
{
id:“蔬菜土豆”，
名称：“波塔托斯”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“蔬菜”
},
{
id:“蔬菜番茄”，
名称：“tomatos”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“蔬菜”
}
]
};
//逻辑
函数数量（状态、动作）{
返回{
……国家，
产品：state.products.map（（产品）=>
action.id==product.id
？{…产品，购买数量：product.buyQuantity+1}
：产品
)
};
}
//减速器
函数缩减器（状态=初始状态，动作）{
开关（动作类型）{
案例“公司产品”：
返回数量（状态、动作）；
违约：
返回状态；
}
};
//范例
const action={type:“INC_PRODUCT”，id:“fruit_apples”}；
const nextState=reducer（initState，action）
console.log（nextState.products[0].buyQuantity）；//=>1.

尝试展平您的数据模型。在这里把蔬菜和水果分开是没有意义的。如果您只需要水果，请使用

过滤器

。通过使用复合id（

category\u product

，如

fruit\u apple

），它还可以非常有效地选择单一产品

这比严格的规则更符合个人偏好，但请尝试将逻辑函数从减缩函数中分离出来。在本例中，我已从减速器中拆分出

incBuyQuantity

：

//展平数据模型
常量initState={
加载状态：{}，
产品目录：[]，
产品：[
{
id:“水果苹果”，
名称：“苹果”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“水果”
},
{
id:“水果梨”，
名称：“梨”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“水果”
},
{
id:“蔬菜土豆”，
名称：“波塔托斯”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“蔬菜”
},
{
id:“蔬菜番茄”，
名称：“tomatos”，
价格:2.5元,，
可供选择的产品：20，
购买数量：0，
类别：“蔬菜”
}
]
};
//逻辑
函数数量（状态、动作）{
返回{
……国家，
产品：state.products.map（（产品）=>
action.id==product.id
？{…产品，购买数量：product.buyQuantity+1}
：产品
)
};
}
//减速器
函数缩减器（状态=初始状态，动作）{
开关（动作类型）{
案例“公司产品”：
返回数量（状态、动作）；
违约：
返回状态；
}
};
//范例
const action={type:“INC_PRODUCT”，id:“fruit_apples”}；
const nextState=reducer（initState，action）
console.log（nextState.products[0].buyQuantity）；//=>1.

我建议尝试使用immer，它大大简化了reducer代码：好的，理论上，你不应该改变你的状态。在Redux中，您需要保持不变性。第二，如果ID匹配，则返回“``…fruit，此时应返回经过所需更新更改的整个状态。我建议，如果可能的话，跳过“产品”层面，直接进入水果/蔬菜层面。在您的案例中，您可以这样做：``在您的案例中：const fruits=[…state.products.fruits]//映射到fruits并执行您的更改返回{…state，products:{…state.products，fruits}``我建议尝试使用immer，它大大简化了reducer代码：好的，理论上，您不应该更改您的状态。在Redux中，您需要保持不变性。第二，如果ID匹配，则返回“``…fruit，此时应返回经过所需更新更改的整个状态。我建议，如果可能的话，跳过“产品”层面，直接进入水果/蔬菜层面。在您的案例中，您可以这样做：``在您的案例中：const fruits=[…state.products.fruits]//映射水果并执行您的更改返回{…state，products:{…state.products，fruits}```@bidondziura很棒！若问题已经解决，那个么请接受一个让其他人知道的答案，并且在可能的时候不要忘记投票。干杯。@bidondziura太棒了！若问题已经解决，那个么请接受一个让其他人知道的答案，并且在可能的时候不要忘记投票。干杯