Javascript 我无法使用函数动态设置我的ReactJS状态

我正在尝试动态设置ReactJS组件的显示

基本上，游戏如下：用户按下一个按钮，然后附属状态的值设置为

true

。允许处理按钮的显示

然而，当我按下一个按钮时，我的状态并没有改变，尽管我会在改变发生后记录它。然而，我已经确定了我的状态。我想知道出了什么问题

这里是我的小片段，易于测试和复制：

下面是我的snippet.js：

export default class App extends React.Component {

  state = {
    displaySelection: false,
    displayCreate: false,
    displayUpdate: false,
    displayDelete: false,
  }

  viewSelection = (e) => {
    e.preventDefault();

    Object.keys(this.state).map((key, index) => {

      // console.log("key value: ", key)
      console.log("target name: ", e.target.name)
      if (key === e.target.name) {
        console.log(e.target.name, " set to true =)")
        return this.setState({ [e.target.name]: true }, console.log("display state: ", this.state))

      } else {
        this.setState({ [e.target.name]: false })
      }
    });



  } 

  render() {
    return (
      <div className="App">
        <button onClick={this.viewSelection}> Launch the Object.keys function =) splay</button>

        <div >
          <button name="displayCreate" onClick={this.viewSelection}> Create </button>
          <button name="displayUpdate" onClick={this.viewSelection}> Update </button>
          <button name="displayDelete" onClick={this.viewSelection}> Delete </button>
          <button name="displaySelection" onClick={this.viewSelection}> O </button>
        </div>
      </div>
    );
  }
}

导出默认类App扩展React.Component{
状态={
displaySelection:false，
displayCreate:false，
displayUpdate:false，
displayDelete:false，
}
视图选择=（e）=>{
e、 预防默认值（）；
Object.keys（this.state）.map（（key，index）=>{
//日志（“键值：”，键）
log（“目标名称：”，例如target.name）
if（key==e.target.name）{
log（e.target.name，“设置为true=）”）
返回this.setState（{[e.target.name]：true}，console.log（“显示状态：，this.state））
}否则{
this.setState（{[e.target.name]：false}）
}
});
} 
render（）{
返回(
启动Object.keys函数=）splay
创造
更新
删除
O
);
}
}

为什么当我按下一个按钮时，这个按钮的状态不变

任何暗示都很好，

---

谢谢

发现您的逻辑有缺陷。在

viewSelection

函数的

else

语句中，您有：

else {
  this.setState({ [e.target.name]: false });
}

因此，在循环的每次迭代中，您都将在状态中单击的目标设置为false。您可以通过将

e.target.name

更改为

key

来解决此问题，如下所示：

else {
  this.setState({ [key]: false });
}

viewSelection = e => {
  e.preventDefault();

  let newValues = {
    displaySelection: false,
    displayCreate: false,
    displayUpdate: false,
    displayDelete: false
  };

  newValues[e.target.name] = true;

  this.setState(newValues);
}

这样，您只需更改不是当前目标的密钥。但这仍然是低效的，因为您仍在运行

setState

4次（状态中每个键1次）。实现所需功能的一个更有效的方法是让对象（本质上是处于状态的对象的副本）的键默认设置为

false

。然后从单击中获取目标并将其设置为true，如下所示：

else {
  this.setState({ [key]: false });
}

viewSelection = e => {
  e.preventDefault();

  let newValues = {
    displaySelection: false,
    displayCreate: false,
    displayUpdate: false,
    displayDelete: false
  };

  newValues[e.target.name] = true;

  this.setState(newValues);
}

---

这里是我的小片段，

把这个小片段放在问题中-不是外线它完成了我的队长我看到你更改了问题标题-因为它最初说

Object.keys

不起作用-不确定你为什么要运行

.map

-因为你忽略了返回的值<代码>我使用返回值否。。。

Object.keys（this.state）.map的左侧没有任何内容-您可能已经完成了
Object.keys（this.state）.forEach
注意：
console.log（“display state:，this.state”）
首先被调用，其返回值被提供给
this.setState（）
。它可以包装在另一个（箭头）函数中，稍后调用–
this.setState（{…}，（）=>console.log（…）
。