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

Question

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

游戏基本上是这样的:用户按下一个按钮，然后附属状态的值被设置为 true。允许处理按钮的显示。

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

这是我的小片段，易于测试和重现:

https://codesandbox.io/s/21963yy01y

这是我的 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>
    );
  }
}

为什么当我按下一个按钮时，这个按钮的状态没有改变？

任何提示都会很棒， 谢谢

Answer 1

发现您的逻辑存在缺陷。在 viewSelection 函数的 else 语句中，您有:

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

因此在循环的每次迭代中，您都将被点击的目标设置为 false 状态。您可以通过将 e.target.name 更改为 key 来解决这个问题，如下所示:

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

这样一来，您只是在更改不是当前目标的 key 。但这仍然效率低下，因为您仍在运行 setState 4 次(状态中的每个键 1 次)。实现所需内容的一种更有效的方法是拥有一个默认情况下将键设置为 false 的对象(本质上是状态的副本)。然后从点击中获取目标并将其设置为 true，如下所示:

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

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

  newValues[e.target.name] = true;

  this.setState(newValues);
}