Блог

Мой компонент имеет следующее состояние:

 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
   }
  })
}
  

Как я могу этого добиться?

Если ваш браузер поддерживает расширяемый синтаксис, то обновленный 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)
}
  

Надеюсь, это поможет

Вы можете использовать свойства вычисляемого объекта, чтобы заставить его работать. this.setState выполняется неглубокое слияние, и вам придется распространять свойства, вложенные на один уровень глубже.

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

  this.setState({
   models:{
     // spread all the properties for models
     ...this.state.models,
     [key]: true // set the key prop to false
   }
  })
}
  

Если мы хотим убедиться, что другие атрибуты всегда false, то переопределите значения перед установкой состояния.

 onButtonClick(e){
      const key = e.target.getAttribute('model');
      const updatedModels = Object.entries(this.state.models)
                                  .reduce((memo, [currKey]) => {
         if(currKey === key) {
             memo[currKey] = true;
         } else {
             memo[currKey] = false;
         }       

  
         return memo;
      }, {});
    
      this.setState({
       models: updatedModels
      })
    }