javascript - react JS : set all values of nested object to false except for one

Question

我的组件具有以下状态:

this.state = {
  models: {
    model1: false,
    model2: true,
    model3: false,
    model4: false
  },

  state1: 'somevalue',
  state2: 5,
  state3: false

}

当调用 onButtonClick() 函数时，我希望 this.state.models 的所有值都为 false，除了key 变量对应的值:

onButtonClick(e){
  const key = e.target.getAttribute('model');

  this.setState({
   models:{
     //set all states to false except for the key
   }
  })
}

我怎样才能实现这个目标？

Answer 1

如果您的浏览器supports spread syntax ，然后可以通过该语法获取更新的 models 对象，并且 Array#reduce如下所述:

onButtonClick(e){
  const key = e.target.getAttribute('model');
  
  // Get reference to current models object in state
  const models = this.state.models;

  
  
  // Compose new state object by..
  const state = { 
    models : 
    Object
    .keys(models) // Get list of keys in model
    .reduce((result, k) => { 
      // Reduce keys to object of key/value pairs
      // where key match is set to true
      return { ...result, [k] : key === k };
    }, {})
  }

  this.setState(state)
}

希望有帮助