Question

嘿，我正在尝试从Javascript对象内部的状态中删除key：value对。

当我在代码中硬编码键名时，它可以工作，但是当我尝试使用函数调用中的变量时，它什么也没做。

有人可以帮我吗？

这是一个对象示例：

  toppingsSelected: {
     "Onion":"true",
     "Mushrooms":"true",
  }

这有效，硬编码：

deleteTopping = toppingName => {

   const { Onion, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns object without onion

  };

这不起作用：

deleteTopping = toppingName => {


   const toppingName = "Onion"; // Variable gets passed in

   const { toppingName, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns original object, no change made

  };

所以我基本上是想从React状态中删除一个键，但是我对Java还是很陌生。

如何使Javascript知道toppingName是键？

Answer 1

另一种选择是在toppingName周围添加方括号，并将其分配给变量。正如@Bergi在评论中指出的那样，此选项不会使toppingsSelected

发生突变

const toppingsSelected = {
  "Onion":"true",
  "Mushrooms":"true",
};
const toppingName = "Onion";
const {
  [toppingName]: topping,
  ...withoutOnion
} = toppingsSelected;

console.log(JSON.stringify(withoutOnion));

要设置React状态，请执行此操作

this.setState({ toppingsSelected: withoutOnion })

Answer 2

例如，您可以使用delete

delete toppingsSelected[toppingName];

Answer 3

一种方法是使用Array.prototype.filter()

const _obj = {
  'Onion': true,
  'notOnion': false
};

const newObj = Object.keys(_obj)
  .filter(key => key !== 'Onion')
  .reduce((acc, cur) => ({ ...acc, cur }), {})

console.log(newObj); // { notOnion: false }

这将返回一个没有'Onion'属性的新对象

使用函数中的变量删除对象的键和值

3 个答案: