Javascript 更新对象数组中的属性

我尝试使用React增加对象数组中的quantity属性。 但我不知道如何才能找到要更新的项目

我尝试的是：

const initialState = {
  items: [{
      id: 254,
      quantity: 1
    },
    {
      id: 493,
      quantity: 1
    }
  ],
};

const payload = {
  id: 254
};

function updateProduct(state, action) {
  return state.items.map((item, i) => {
    if (item.id === action.id) {
      return {
        ...state,
        items: [
          ...state.items,
          {
            [i]: {
              quantity: state.items[i].quantity + 1
            }
          }
        ]
      };
    }
  });
}

返回的对象应为：

{
  items: [{
      id: 254,
      quantity: 2
    },
    {
      id: 493,
      quantity: 1
    }
  ],
}

---

谢谢你的帮助

你好像挖得有点深。根据您提供的数据，这不是很简单吗

function updateProduct(state, action) {
  return state.items.map((item, i) => {
    if (item.id === action.id) {
       return {
         ...item,
         quantity: item + 1
       }
    } else {
       return item
    }
  });
}

---

看起来你挖得有点深。根据您提供的数据，这不是很简单吗

function updateProduct(state, action) {
  return state.items.map((item, i) => {
    if (item.id === action.id) {
       return {
         ...item,
         quantity: item + 1
       }
    } else {
       return item
    }
  });
}

---

我将提出一些修改建议：

对{type，payload}使用操作约定

在减速器中执行此操作

这就产生了：

const reducer = (state, action) => {
  const {type, payload} = action;

  switch(type) {
    case 'update_quantity':
      const {id: itemId, quantity} = payload
      return ({
        ...state,
        items: state.items.map(item => (item.id === itemId ? {...item, quantity} : item)
    default:
      return state;
  }
}

然后，要更新：

---

dispatch（{type:'update_quantity'，payload:{id:'xxx'，quantity:3}}）
我将建议一些更改：

对{type，payload}使用操作约定
在减速器中执行此操作
这就产生了：

const reducer = (state, action) => {
  const {type, payload} = action;

  switch(type) {
    case 'update_quantity':
      const {id: itemId, quantity} = payload
      return ({
        ...state,
        items: state.items.map(item => (item.id === itemId ? {...item, quantity} : item)
    default:
      return state;
  }
}

然后，要更新：

dispatch（{type:'update_quantity'，payload:{id:'xxx'，quantity:3}}）
首先，您必须在新变量中克隆/存储您的arr状态/值

let state = [...initialState.items] // now you have all the values in state var

// and then mutate the state
let mutatedState = state.map(el => {
  //modify data how you need
});

// Then assign mutatedState to initialState.items

initialState.items = mutatedState 
};


首先，您必须在新变量中克隆/存储您的arr状态/值

let state = [...initialState.items] // now you have all the values in state var

// and then mutate the state
let mutatedState = state.map(el => {
  //modify data how you need
});

// Then assign mutatedState to initialState.items

initialState.items = mutatedState 
};


假设你想

{
  items: [{
      id: 254,
      quantity: 2
    },
    {
      id: 493,
      quantity: 2 // <<<<<<<<<<<< 2 here as well
    }
  ],
}

假设你想

{
  items: [{
      id: 254,
      quantity: 2
    },
    {
      id: 493,
      quantity: 2 // <<<<<<<<<<<< 2 here as well
    }
  ],
}

解决方案：

简单地说，深度克隆对象（状态）并增加指定的值


const initialState={
项目：[{
id:254，
数量：1
},
{
身份证号码：493，
数量：1
}
],
};
常数有效载荷={
身份证号码：254
};
console.log（updateProduct（initialState，payload））；
函数updateProduct（状态、操作）{
var newState=JSON.parse（JSON.stringify（state））；
var isFound=false；
newState.items.forEach（item=>{
对于（项目中的var prop）{
if（prop=='id'&&item[prop]==action.id）{
item.quantity++；isFound=true；中断；
}
}
如果（发现）返回；
});
返回新闻状态；
}
解决方案：

简单地说，深度克隆对象（状态）并增加指定的值


const initialState={
项目：[{
id:254，
数量：1
},
{
身份证号码：493，
数量：1
}
],
};
常数有效载荷={
身份证号码：254
};
console.log（updateProduct（initialState，payload））；
函数updateProduct（状态、操作）{
var newState=JSON.parse（JSON.stringify（state））；
var isFound=false；
newState.items.forEach（item=>{
对于（项目中的var prop）{
if（prop=='id'&&item[prop]==action.id）{
item.quantity++；isFound=true；中断；
}
}
如果（发现）返回；
});
返回新闻状态；
}
您可以这样写：

function updateProduct(state, action) {
  return { ...state, 
    items: state.items.map(item => ({ 
       ...item, 
       quantity: action.id === item.id ? item.quantity + 1 : item.quantity 
    })) 
  }
}


你可以这样写

function updateProduct(state, action) {
  return { ...state, 
    items: state.items.map(item => ({ 
       ...item, 
       quantity: action.id === item.id ? item.quantity + 1 : item.quantity 
    })) 
  }
}


这是我通常更新redux存储阵列中项目的方式
您可以这样做：

function updateProduct(state, action) {

  let updatedItems = state.items.map((item)=>{

  if(item.id=== action.id){
      return {...item,quantity:item.quantity+1}
    }
    return item
  })
  return {...state, items:updatedItems}
}

这是我通常更新redux存储阵列中项目的方式
您可以这样做：

function updateProduct(state, action) {

  let updatedItems = state.items.map((item)=>{

  if(item.id=== action.id){
      return {...item,quantity:item.quantity+1}
    }
    return item
  })
  return {...state, items:updatedItems}
}

“不变异”是什么意思？你必须变异才能让连接的组件更新你的id的唯一性？@Robert是的，id是唯一的。你说的“不变异”是什么意思？你必须变异才能让连接的组件更新你的id的唯一性？@Robert是的，id是唯一的。这样会更干净。。。但它只更新item对象，而不更新状态。@SLePort Meir下面的回答不起作用吗？我想这就足够更新状态了。这样就更干净了。。。但它只更新item对象，而不更新状态。@SLePort Meir下面的回答不起作用吗？我认为这足以更新状态。