切换反应状态答案

【问题标题】：Toggling React State切换反应状态
【发布时间】：2019-06-15 13:41:22
【问题描述】：

将此视为我的反应状态

state = {
a: true,
b: false,
c: false,
d: false,
e: false 
}

现在，我想在按钮单击时切换状态，如果事件等于我状态中的键 (a, b, c, d, e)，我希望它为真，保持为假。目前我正在做的是..

someEvent = (event) => {
if (event === "a") this.setState({a: true, b: false, c: false, d: false, e: false})
if (event === "b")this.setState({a: false, b: true, c: false, d: false, e: false})
....
....
....
}

我希望给定的事件等于键在我的状态中具有真值，而其他一切都为假，而不是将每个状态都写入/设置为假，

我该怎么做？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以通过以下代码做到这一点：

this.setState({
  a: event === "a",
  b: event === "b",
  c: event === "c",
  d: event === "d",
  e: event === "e"
});

【讨论】：

@downvoters：想解释一下投反对票的原因吗？我似乎看不出这个答案的问题
我没有投反对票，但这需要写出每个状态属性。对于大量属性，这可能很乏味且容易出错。但如果属性不多，这是一个很好的解决方案。

【解决方案2】：

你可以初始化一个所有状态为假的对象

const obj = {};
for (let char = 'a'; char <= 'e'; char++) obj[char] = false;

或基于 this.state 对象中的键

for (let key in this.state) obj[key] = false;

下一步将状态设置为真，无论哪个条件有效

obj[event] = true;

现在设置状态

this.setState(obj);

PS：由于我没有添加验证，因此您应该处理可能破坏代码的错误和事件。

PS (2)：这可以让您节省时间，而不是自己编写每个 if/else 或 switch 语句。

【讨论】：

【解决方案3】：

你可以这样做

Object.keys( this.state )
        .map( Key => {
            if(event === this.state[Key]){
              this.setState({this.state[Key] : true});
            }else{
              this.setState({this.state[Key] : false});
            }
     } );
 })

【讨论】：

您不认为调用this.setState 来获取状态中的所有键不会有性能问题吗？
我的答案略有改进，请检查。

【解决方案4】：

你可以简单地这样做。

someEvent = (event) => {
    this.setState({ [event]: true })
}

所以如果 event === "a" 那么它只会为 a 设置状态 b、c、d、e 相同，这一个条件将为您设置所有状态。

【讨论】：

【解决方案5】：

这里有一个单线。

使用Object.keys() 从对象中获取键数组，然后遍历数组以检查事件是否等于状态。如果找到则状态为真，否则为假；

let event = 'c'
let state = { a: true, b: false, c: false, d: false, e: false }
Object.keys(state).forEach(s => state[s] = s === event)
console.log(state)

【讨论】：

你不认为调用this.setState 来获取状态中的所有键不会有性能问题吗？
我不太明白。我没有 reactjs 的背景，很抱歉，但我认为这个答案或多或少有用。在我看来，在这段代码的末尾调用 this.setState 会起作用。如果您真的关心性能，我可以为您再优化一点。
非常感谢您的回答。 setState 重新渲染我们的 DOM（就像它与虚拟 DOM 比较并重新渲染更改一样）。不过，我赞成你的回答:)

【解决方案6】：

听起来你可能对你的状态进行低效建模——如果总是有一个真值而其他一切都是假的，你可以简单地这样做：

state = {
  currentlyTrue: a
}
someEvent = (event) => {
  this.setState({currentlyTrue: event})
}

如果您设置在当前状态模型上，这应该可以工作。这是fiddle

someEvent = (event) => {
  this.setState((previousState) => {
    Object.keys(previousState).forEach((v) => { previousState[v] = false })
    previousState[event] = true
    return previousState;
  })
}

【讨论】：

您不认为调用this.setState 来获取状态中的所有键不会有性能问题吗？
我只调用了一次 setState - 我只是在返回之前对 previousState 对象进行变异以使其达到所需的最终结果。

【解决方案7】：

另一种方法

let updateObject = [...this.state];
Object.keys( this.state )
        .map( Key => {
            if(event === this.state[Key]){
              updateObject[key] = true;
            }else{
              updateObject[key] = false;
            }
     } );
 });

this.setState({...this.state,updateObject});

【讨论】：