从 Dictionary React js 中删除项目的最佳方法答案

【问题标题】：Best way to delete an item from Dictionary React js从 Dictionary React js 中删除项目的最佳方法
【发布时间】：2018-08-12 16:59:41
【问题描述】：

我的代码中有一个名为 CarValues 的字典，其中包含以下数据： CarValues 是在状态中初始化的字典。

dictionary: CarValues

key ==> string

Value ==> Array

key => Honda, Value => white, yellow, red, orange
key => Toyota, Value => white, yellow, green, black
Key => Volkswagen Value => 123, 456, 343

我想从 CarValues 中完全删除 Honda 及其价值。虽然，我看到很少有类似的问题，但我找不到这个问题的最佳解决方案。

How can I remove an attribute from a Reactjs component's state object

【问题讨论】：

至于删除对象（字典）属性，可以使用delete obj[attr]。如果您的问题是关于更改 React 组件状态，那么您应该添加您的状态结构并详细说明问题所在。

标签： javascript reactjs react-native

【解决方案1】：

可能到达这里有点晚了，但这里有一种使用钩子而不实际改变先前状态的方法。

const sampleItems = {


'key1': { id: 1, name: 'test'},
  'key2': { id: 2, name: 'test2'},
}

const Test = props => {
  const [items, setItems] = useState(sampleItems);

  deleteItemFromStateObject = itemKey => {
    setItems(({[itemKey]: toDelete, ...rest}) => rest);
  }
}

【讨论】：

【解决方案2】：

我相信为了在不改变状态的情况下真正做到这一点，您需要像这样重新创建整个状态。

class Test extends React.Component {
  state = {
    thingToDelete: {},
    otherStuff: {}
  };

  deleteThingToDelete = () => {
    const {thingToDelete, ...state} = this.state;
    this.setState(state);
  }
}

使用扩展运算符，我们实现了浅层克隆，所以要小心。另一种选择是使用 Object.assign ，但这也只会提供浅层克隆，但您将获得更好的浏览器支持。

【讨论】：

【解决方案3】：

这是另一个足够简单的解决方案来实现这一点。

const myCarsValueInState = this.state.myCarsValueInState;
    Object.keys(myCarsValueInState).map((index) => {
      myCarsValueInState[index] = undefined; // you can update on any condition if you like, this line will update all dictionary object values. 
      return myCarsValueInState;
    });

足够简单。

【讨论】：

【解决方案4】：

首先全局初始化数组

var dict = []

将对象添加到字典中

dict.push(
     { key: "One",value: false},
     { key: "Two",value: false},
     { key: "Three",value: false});

Output : 
   [0: {key: "One", value: false},
    1: {key: "Two", value: false},
    2: {key: "Three", value: false}]

从字典更新对象

Object.keys(dict).map((index) => {        
  if (index == 1){
    dict[index].value = true
  }
});

Output : 
   [0: {key: "One", value: false},
    1: {key: "Two", value: true},
    2: {key: "Three", value: false}]

从字典中删除对象

Object.keys(dict).map((index) => {              
      if (index == 2){
        dict.splice(index)
      }
    });

Output : 
    [0: {key: "One", value: false},
     1: {key: "Two", value: true}]

【讨论】：

【解决方案5】：

您可以使用 Underscore.js 或 Lodash http://underscorejs.org/#omit

_.omit(copyCarValues, 'Honda');

【讨论】：

【解决方案6】：

这应该可以解决您的问题

yourMethod(key) {
  const copyCarValues= {...this.state.CarValues}
   delete copyCarValues[key]
  this.setState({
     CarValues: copyCarValues,
  })
}

【讨论】：

不应该是delete copyCarValues[key]而不是delete CarValues[key]吗？
我有一个问题：不会删除 this.state.CarValues[this.state.key] 直接解决。为什么我们必须创建副本并删除项目然后更新状态。抱歉，我是前端和 UI 方面的新手。请原谅我的问题，如果它是蹩脚的。
Reacts 状态意味着是不可变的，这意味着您永远不会更改状态，如果您想进行更改，则替换整个状态。 @Vicky

【解决方案7】：

最简单的方法是：

const carValues = Object.assign({}, this.state.carValues)
delete carValues[key]
this.setState({ carValues })

【讨论】：