React JS：将嵌套对象的所有值设置为 false，除了一个

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

如果你的浏览器支持 spread syntax，那么更新的对象可以通过该语法和Array#reducemodels获得，如下所述：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)}

Answer 2

您可以使用计算对象属性来使其工作。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   }  })}如果我们想确保其他属性始终为假，则在设置状态之前覆盖这些值。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      })    }