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

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

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

因此，在循环的每次迭代中，您都将在状态下单击的目标设置为false。您可以通过将e.target.name更改为key来解决此问题，就像这样：

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

这样，您只需要更改不是当前目标的密钥即可。但这仍然没有效率，因为您仍在运行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);
}

我无法通过函数动态设置StateReactJS状态

1 个答案: