更新对象数组中的属性

Question

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

我尝试了什么：

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
    }
  ],
}

感谢您的帮助！

Answer 1

看来你挖得有点深了。根据你提供的数据，这不就这么简单吗：

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

Answer 2

我会建议一些更改：

使用 {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}});

Answer 3

首先你必须 clone/store 你的 arr state/values 在新变量中

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

Answer 4

假设你想要

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

并且假设您可以使用最新最好的 ECMA 脚本：

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

const reduceIncrementQuantity = (item) => ({...item, quantity: item.quantity + 1});
const reduceIncrementQuantities = (state) => ({items: state.items.map(reduceIncrementQuantity)});

console.log(reduceIncrementQuantities(initialState));

Answer 5

解决方案：

为简单起见，深度克隆对象（状态）并增加指定值。

const initialState = {
  items: [{
      id: 254,
      quantity: 1
    },
    {
      id: 493,
      quantity: 1
    }
  ],
};
  
const payload = {
  id: 254
};
  
  
console.log (updateProduct(initialState, payload));

function updateProduct(state, action) {
  var newState = JSON.parse(JSON.stringify(state));
  var isFound = false;
  newState.items.forEach(item => {
    for (var prop in item) {
    if (prop === 'id' && item[prop] == action.id) {
      item.quantity++; isFound = true; break;
    }
    }
    if (isFound) return;
  });
  return newState;
}

Answer 6

你可以这样写，

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

Answer 7

这就是我通常更新 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}
}

更新对象数组中的属性

Update a property in an array of objects

javascript

immutability

ecmascript-6

reactjs

更新对象数组中的 属性

Update a property in an array of objects

javascript

immutability

ecmascript-6

reactjs

更新对象数组中的属性