javascript - 如何在javascript中使用json对象删除对象的json数组？

Question

我正在使用react-native cli 来构建应用程序。我已将所需数据存储在变量中。为了删除不需要的购物车，我传递了与元素绑定(bind)的 json 对象。不幸的是，数据没有被删除。

我的数据:-

[
   {
      "ProdID":306,
      "ProdName":"Freezing Choc",
      "ProdImage":"./Source/Product/2_20190131_101857.png",
      "ProdVar":[

      ],
      "Quantity":1
   },
   {
      "ProdID":307,
      "ProdName":"Bandung",
      "ProdImage":"./Source/Product/3_20190131_101912.png",
      "ProdVar":[

      ],
      "Quantity":1
   },
   {
      "ProdID":308,
      "ProdName":"Hawaiian Breeze",
      "ProdImage":"./Source/Product/4_20190131_102006.png",
      "ProdVar":[

      ],
      "Quantity":3
   }
]

我的脚本:-

removeBtns(item) {
    return [
      {
        text: <Icon name='trash' style={{ fontSize: 15 }} />,
        onPress: () => this.Func_RemoveSelectedCart(item),
        type: 'delete',
      }
    ]
}
Func_RemoveSelectedCart = async (item) => {
    try {
      console.log('ITEM TO REMOVE: ' + JSON.stringify(item));
      await this._onAwaitAlert().then((response) => {
        if (response === 'OK') {
          delete appGlobal.ObjProduct[item];
          console.log('AFTER REMOVE: ' + JSON.stringify(appGlobal.ObjProduct));
        }
      })
        .catch(e => {
          console.log('promise catch ' + e);
        });
    } catch (e) {
      console.log('Unable to remove selected cart. ' + e);
    }
}
renderProductList() {
    var contents = this.state.prodData.map((item) => {
      return (
        <Content key={item.ProdID}>
          <Swipeout right={this.removeBtns(item)}>
            <Card>
              <CardItem>
                .
                .
                .
                .
              </CardItem>
            </Card>
          </Swipeout>
        </Content>
      );
    });
    return (
      <Content padder>
        {contents}
      </Content>
    )
}

假设我想从购物车中删除第二件商品。在 console.log 上，它写道:-

ITEM TO REMOVE: {"ProdID":307,"ProdName":"Bandung","ProdImage":"./Source/Product/3_20190131_101912.png","ProdVar":[],"Quantity":1}

AFTER REMOVE: [{"ProdID":306,"ProdName":"Freezing Choc","ProdImage":"./Source/Product/2_20190131_101857.png","ProdVar":[],"Quantity":1},{"ProdID":307,"ProdName":"Bandung","ProdImage":"./Source/Product/3_20190131_101912.png","ProdVar":[],"Quantity":1},{"ProdID":308,"ProdName":"Hawaiian Breeze","ProdImage":"./Source/Product/4_20190131_102006.png","ProdVar":[],"Quantity":3}]

我尝试过基于论坛、讨论、教程上的搜索引擎结果:-

1:delete appGlobal.ObjProduct[item]; 什么也没发生

2:appGlobal.ObjProduct.delete(item); 异常删除不是一个函数

3:appGlobal.ObjProduct.splice(item); 它删除 ObjProduct 中的所有数据

我无法使用ProdID进行删除，因为变体/选项可以具有相同的ProdID，但变体/选项 。示例:-

[
   {
      "ProdID":301,
      "ProdName":"Mango Punch",
      "ProdImage":"./Source/Product/1_20190131_1212300.png",
      "ProdVar":[],
      "Quantity":1
   },
   {
      "ProdID":305,
      "ProdName":"Berrysome-Go",
      "ProdImage":"./Source/Product/1_20190131_101800.png",
      "ProdVar":[{
         "PVID":131,
         "PVName":"Name 1"
      }],
      "Quantity":3
   },
   {
      "ProdID":305,
      "ProdName":"Berrysome-Go",
      "ProdImage":"./Source/Product/1_20190131_101800.png",
      "ProdVar":[{
         "PVID":132,
         "PVName":"Name 2"
      }],
      "Quantity":2
   },
   {
      "ProdID":305,
      "ProdName":"Berrysome-Go",
      "ProdImage":"./Source/Product/1_20190131_101800.png",
      "ProdVar":[{
         "PVID":133,
         "PVName":"Name 3"
      }],
      "Quantity":7
   }
]

Answer 1

您需要获取 ObjProduct 数组中 item 的索引，并在删除元素时使用该索引。您不能使用 item 作为数组索引。

var index = appGlobal.ObjProduct.findIndex(e => e.ProdID = item.ProdID);
if (index != -1) {
    appGlobal.ObjectProduct.splice(index, 1);
} else {
    console.log("Item not found in appGlobal.ObjProduct");
}

您还应该使用 splice() 来删除数组元素，而不是delete，以便为数组重新建立索引。