如何使用扩展函数删除 React 中的嵌套对象答案

【问题标题】：how to delete nested object in React with spread function如何使用扩展函数删除 React 中的嵌套对象
【发布时间】：2020-11-24 07:23:38
【问题描述】：

我正在使用 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
       }

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

【问题讨论】：

标签： reactjs react-redux

【解决方案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,
});

【讨论】：

【解决方案2】：

这是另一个使用 Object.entries 和 Object.fromEntries 的选项

const state = {
  pId: {
    k1: 'v1',
    k2: 'v2',
    k3: 'v3',
  },
};

const reducer = (productId, variant) => {
  return {
    ...state,
    [productId]: Object.fromEntries(
      Object
      .entries(state[productId])
      .filter(([key, val]) => key !== variant)
    ),
  }
}
console.log(reducer('pId', 'k2'))

【讨论】：

您好，感谢您的帮助！稍后我一定会尝试一下。