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

Vik*_*rMS 3 javascript object ecmascript-6 reactjs

嘿,我正在尝试从 Javascript 对象内的状态中删除键:值对。

当我在代码中对键名称进行硬编码时,它可以工作,但是当我尝试使用函数调用中的变量时,它不会执行任何操作。

有人可以帮我吗?

这是一个对象示例:

  toppingsSelected: {
     "Onion":"true",
     "Mushrooms":"true",
  }
Run Code Online (Sandbox Code Playgroud)

这有效,硬编码:

deleteTopping = toppingName => {

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

  };
Run Code Online (Sandbox Code Playgroud)

这不起作用:

deleteTopping = toppingName => {


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

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

  };
Run Code Online (Sandbox Code Playgroud)

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

我怎样才能让Javascript知道toppingName是一个键?

TFi*_*her 6

另一种选择是添加方括号 arround toppingName,并将其分配给变量。正如 @Bergi 在评论中指出的那样,这个选项不会改变toppingsSelected

const toppingsSelected = {
  "Onion":"true",
  "Mushrooms":"true",
};
const toppingName = "Onion";
const {
  [toppingName]: topping,
  ...withoutOnion
} = toppingsSelected;

console.log(JSON.stringify(withoutOnion));
Run Code Online (Sandbox Code Playgroud)

要设置 React 状态,你可以这样做

this.setState({ toppingsSelected: withoutOnion })
Run Code Online (Sandbox Code Playgroud)

  • 这个对我有用。`deleteTopping = toppingName => { const { [toppingName]: topping, ...withoutOnion } = this.state.toppingsSelected; this.setState({toppingsSelected: withoutOnion}) }` (2认同)