reactjs - 如何使用传播函数删除React中的嵌套对象

Question

我正在使用react-redux开发一个简单的购物车功能，并且我有一个结构如下的对象:

{
     0: { // product ID
       "S" : 1, //product variant and item count
       "M" : 1  
     },
     1: {
       "L":1
       "XL": 5
     },
}

我想根据用户操作删除该属性，但到目前为止我无法实现。

尝试 1:删除功能将删除状态内的所有内容，而不是删除选定的属性。

    case REMOVE_PRODUCT_FROM_CART:
      let newObject = Object.assign({}, state)
      return delete newObject[productId][varient];

尝试 2:仅设法将属性设置为 null，但仍无法删除该项目。

    case REMOVE_PRODUCT_FROM_CART:
      return {...state,
        [productId]: {
          // check if property exists
          ...(state?.[productId] ?? {}),
          [varient]: null
       }

有什么方法可以使用扩展运算符删除所需的属性吗？

Answer 1

这是一种方法:

case REMOVE_PRODUCT_FROM_CART:
  const newObject = {...state[productId]}
  delete newObject[varient]
  return {...state, [productId]:newObject}

这是另一种方法:

const state = {
  22: {
    ok: 88,
    remove: 22,
  },
};
const productId = 22;
const varient = 'remove';
const { [varient]: ignore, ...product } = state[productId];
console.log('new state', {
  ...state,
  [productId]: product,
});